js防止DIV布局滚动时闪动的解决方法_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js防止DIV布局滚动时闪动的解决方法_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2112字，纯文字阅读大概需要4分钟。
内容图文
本文实例讲述了js防止DIV布局滚动时闪动的方法，分享给大家供大家参考。具体方法如下：
最近接触页面性能的东西，有很多细微又原始的内容，比如浏览器渲染。资料非常多，所以选一些做节译，备忘。
JavaScript多次写、读DOM就会发生「布局颠簸」，引起文档重排(reflow – the process of constructing a render tree
// 读
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程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的js防止DIV布局滚动时闪动的解决方法_javascript技巧全部内容，希望文章能够帮你解决js防止DIV布局滚动时闪动的解决方法_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。