尽量减少浏览器回流/重新渲染

Question

我目前正在为我的硕士论文编写一些代码。关于有效的DOM操作，我有几个问题。

1）考虑，你不得不对许多有接近对方节点的执行一堆DOM操作。对所有这些节点的最高父节点进行深层复制（并将其保留在DOM之外），对该子树执行操作，然后将其与DOM中的对应节点进行交换，是否有意义。这会最大限度地减少浏览器回流/重新渲染？

2）为改变一个节点更/比操纵它的子树少高性能的innerHTML？

3）是否有你能给我在香草的javaScript高效DOM操作什么比较好的建议（没有任何框架/库）？

预先感谢您！

Answer 1

为了防止过多的浏览器渲染，最重要的事情是确保您对您的读写进行分组。

如果您需要做的事情到多个节点，并且需要读取他们的东西，那么你应该从所有节点先读，然后写所有。

的DOM的工作方式是，每次你需要从中读取数据时，它会检查其是否被改变。如果是这样，浏览器将重新渲染。

因此，首先选择所有的元素，你缓存需要得到信息，然后对所有这些设置。