js解决方案，以防止闪烁时，div布局滚动

本文以js为例，防止div滚动flash的布局方法，供大家分享，供大家参考。具体方法如下：

最近出现在页面性能上的东西有很多微妙和原始的内容，比如浏览器渲染。数据非常大，所以选择做一些摘录，备忘录。

javaｓｃｒｉｐｔ多次写入和读取DOM，布局颠簸

复制代码如下：从DOM树）。

读取

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读取几何值，我们将迫使浏览器提前安排布局。这就是所谓的强制同步布局，将执行绩效的生活。

在现代桌面浏览器中，布局凹凸的副作用可能并不明显；但在低端移动设备上，问题非常严重。

快速解决方案

在理想的世界中，只要我们简单地重新排列代码执行顺序，我们就可以批量读取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；

}）；

......

希望这篇文章将帮助大家基于Javaｓｃｒｉｐｔ的Web程序设计。