js防止DIV布局滚动时闪动的解决方法


Posted in Javascript onOctober 30, 2014

本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考。具体方法如下:

最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染。资料非常多,所以选一些做节译,备忘。
JavaScript多次写、读DOM就会发生「布局颠簸」,引起文档重排(reflow ? the process of constructing a render tree

from a DOM tree1)。

// 读

var h1 = element1.clientHeight;

// 写 (布局作废)

element1.style.height = (h1 * 2) + 'px';

// 读 (触发布局)

var h2 = element2.clientHeight;

// 写 (布局作废)

element2.style.height = (h2 * 2) + 'px';

// 读 (触发布局)

var h3 = element3.clientHeight;

// 写 (布局作废)

element3.style.height = (h3 * 2) + 'px';

DOM被写时,布局就作废了,需要在某个时间点重排。但浏览器很懒,它想等到当前操作(或说帧)结束前再来重排。
不过,如果我们在当前操作(或说帧)结束前从DOM中读取几何数值,那么我们就强制浏览器提前重排布局,这就是所谓的「强制同步布局」(forced synchonous layout),它会要了性能的命。
在现代的桌面浏览器上,布局颠簸的副作用可能并不明显;但放到低端移动设备上,问题就很严重了。

快速解决办法

在一个理想世界里,我们只要简单地重新排列代码执行顺序,就可以批量读DOM、批量写DOM。这意味着,文档只需一次重排。

// 读

var h1 = element1.clientHeight;

var h2 = element2.clientHeight;

var h3 = element3.clientHeight;

// 写 (布局作废)

element1.style.height = (h1 * 2) + 'px';

element2.style.height = (h2 * 2) + 'px';

element3.style.height = (h3 * 2) + 'px';

// 文档在帧末重排

现实世界又如何?

现实中可就没那么简单。大型程序中,代码散播各处,个个都存在这类危险的DOM。我们没法轻松(显然也不应该)把我们漂亮的、解藕的代码揉合一块,就只是为了控制住执行顺序。那么为了优化性能,我们怎样把读和写做批量处理?

来认识requestAnimationFrame

window.requestAnimationFrame安排一个函数在下一帧执行,类似于setTimout(fn, 0)。这非常有用,因为我们可以用它来排定所有的DOM写操作在下一帧一同执行,DOM读操作就按现在的顺序同步执行。

// 读

var h1 = element1.clientHeight;

// 写

requestAnimationFrame(function() {

  element1.style.height = (h1 * 2) + 'px';

});

// 读

var h2 = element2.clientHeight;

// 写

requestAnimationFrame(function() {

  element2.style.height = (h2 * 2) + 'px';

});

……

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
Javascript无阻塞加载具体方式
Jun 28 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
理解Javascript图片预加载
Feb 23 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
a标签调用js的方法总结
Sep 05 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 #Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 #Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 #Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 #Javascript
js实现ArrayList功能附实例代码
Oct 29 #Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 #Javascript
js中的json对象详细介绍
Oct 29 #Javascript
You might like
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php中的ini配置原理详解
2014/10/14 PHP
php之readdir函数用法实例
2014/11/13 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
应届生英语教师求职信
2013/11/05 职场文书
婚礼司仪主持词
2014/03/14 职场文书
保护母亲河倡议书
2014/04/14 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
个人工作表现评价材料
2014/09/21 职场文书
老干部座谈会主持词
2015/07/03 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
js实现自动锁屏功能
2021/06/02 Javascript
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL