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 相关文章推荐
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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初学者(入门学习经验谈)
2010/10/12 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
python如何在循环引用中管理内存
2018/03/20 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python画图高斯分布的示例
2019/07/10 Python
python中的列表与元组的使用
2019/08/08 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
美国在线购物频道:Shop LC
2019/04/21 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
金讯Java笔试题目
2013/06/18 面试题
高中毕业自我鉴定
2013/12/19 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android