最小化浏览器重排/重新渲染

Posted 2023-02-21

【中文标题】最小化浏览器重排/重新渲染

【英文标题】：Minimizing browser reflow/re-rendering

【发布时间】：2015-02-03 07:33:24

【问题描述】：

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

1) 考虑到您必须在多个彼此靠近的节点上执行一堆 DOM 操作。制作所有这些节点的最顶层 parentNode 的深层副本（并将其保留在 DOM 之外），在该子树上执行操作，然后将其与 DOM 中的对应物交换是否有意义。这会最大限度地减少浏览器重排/重新渲染吗？

2) 更改节点的 innerhtml 是否比操作其子树的性能更高/更低？

3) 关于在 vanilla javascript（没有任何框架/库）中进行高效 DOM 操作，您可以给我更多好的建议吗？

提前谢谢你！

【问题讨论】：

您设计并实施了哪些测试？

目前没有。我愿意接受建议 :) 编辑：嗯，我一直在为上述情况实施一些简单的测试（添加大量子节点并使用 chrome 开发工具对其进行评估），但我还不能完全决定。

【参考方案1】：

1) 考虑一下你必须对一个数字执行一堆 DOM 操作 彼此靠近的节点。做一个有意义吗 所有这些节点的最顶层 parentNode 的深层副本（并保留它 在 DOM 之外），对该子树执行操作，然后 将其与 DOM 中的对应物交换。这会最小化浏览器吗 回流/重新渲染？

是的 - 对对方进行更改

2) 改变节点的 innerHTML 比 操作它的子树？

更高性能 - 因为您在 dom 之外进行字符串操作

3) 关于高效 DOM，您还有什么好的建议可以给我吗？ 在 vanilla javaScript 中操作（没有任何框架/库）？

document.createDocumentFragment() 是有史以来最好的完全可控的虚拟 dom

【参考方案2】：

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

如果你需要对多个节点做某事，并且需要从它们读取一些东西，那么你应该先从所有节点读取，然后再写入所有节点。

DOM 的工作方式是，每次您需要读取它时，它都会检查它是否已更改。如果是，浏览器将重新呈现。

因此，首先选择所有元素，缓存您需要获取的信息，然后设置所有元素。