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 相关文章推荐
菜单效果
Oct 14 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
快速入门Vue
Dec 19 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Python中交换两个元素的实现方法
2018/06/29 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
干部培训自我鉴定
2014/01/22 职场文书
致800米运动员广播稿
2014/02/16 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
学习保证书怎么写
2015/02/26 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2016年寒假见闻
2015/10/10 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库
Win2008系统搭建DHCP服务器
2022/06/25 Servers