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 相关文章推荐
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 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+mysql写的简单留言本实例代码
2008/07/25 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
大学毕业感言200字
2014/03/09 职场文书
法律六进活动方案
2014/03/13 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
教师反邪教心得体会
2016/01/15 职场文书