本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考。具体方法如下:
最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染。资料非常多,所以选一些做节译,备忘。 JavaScript多次写、读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree
代码如下:
DOM被写时,布局就作废了,需要在某个时间点重排。但浏览器很懒,它想等到当前操作(或说帧)结束前再来重排。 不过,如果我们在当前操作(或说帧)结束前从DOM中读取几何数值,那么我们就强制浏览器提前重排布局,这就是所谓的「强制同步布局」(forced synchonous layout),它会要了性能的命。 在现代的桌面浏览器上,布局颠簸的副作用可能并不明显;但放到低端移动设备上,问题就很严重了。
在一个理想世界里,我们只要简单地重新排列代码执行顺序,就可以批量读DOM、批量写DOM。这意味着,文档只需一次重排。
代码如下: