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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
前端路由&webpack基础配置详解
2019/06/10 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python读取指定字节长度的文本方法
2019/08/27 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
骨干教师培训感言
2014/01/16 职场文书
《秋游》教学反思
2014/04/24 职场文书
党员群众路线承诺书
2014/05/20 职场文书
特此通知格式
2015/04/27 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
golang操作rocketmq的示例代码
2022/04/06 Golang
table不让td文字溢出操作方法
2022/12/24 HTML / CSS