多语言展示
当前在线:1090今日阅读:167今日分享:16

DIV布局滚动时闪动的方法

JavaScript多次写、读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree。
方法/步骤
1

DOM被写时,布局就作废了,需要在某个时间点重排。但浏览器很懒,它想等到当前操作(或说帧)结束前再来重排。

2

不过,如果我们在当前操作(或说帧)结束前从DOM中读取几何数值,那么我们就强制浏览器提前重排布局,这就是所谓的「强制同步布局」(forced synchonous layout),它会要了性能的命。

3

在现代的桌面浏览器上,布局颠簸的副作用可能并不明显;但放到低端移动设备上,问题就很严重了。

4

快速解决办法:在一个理想世界里,我们只要简单地重新排列代码执行顺序,就可以批量读DOM、批量写DOM。这意味着,文档只需一次重排。

5

现实中可就没那么简单。大型程序中,代码散播各处,个个都存在这类危险的DOM。我们没法轻松(显然也不应该)把我们漂亮的、解藕的代码揉合一块,就只是为了控制住执行顺序。

6

来认识requestAnimationFrame,window.requestAnimationFrame安排一个函数在下一帧执行,类似于setTimout(fn, 0)。

注意事项
1

以上就是小编带给大家的如何操作的关键所在,如果觉得本经验对你们有帮助,请给小编我进行一点小小的支持。大家也可以下面发表一下自己的看法。

2

个人意见,仅供参考。

3

游戏时长不宜过度,会有害健康。

推荐信息