将JavaScript数据添加到页面时效率更高：创建新元素还是填充现有元素？

Question

我有一个页面，我通过使用数据创建新的HTML元素来添加API响应数据。

我应该在页面上创建我的HTML元素并通过我的脚本获取它们然后填充它们吗？

在JS中创建它们的效率是否低或无关紧要？

由于

Answer 1

更改元素的内容或附加元素？

在大多数情况下，这两种情况都需要重绘，所以如果您需要更改许多元素，那么正确的答案可能是最有效的解决方案，就是在documentFragment中创建这些元素，并将它们全部附加到一次性使用DOM，而不是更改DOM中已存在的许多元素的内容，需要重新绘制每个操作。

作为旁注，克隆元素比创建新元素更快。

Answer 2

我认为一个很好的类比就是我们如何处理字符串连接与构建的问题（.NET / C＃，如果你想要更具体的东西）。

我们被告知字符串连接不是一种有效的操作，因为必须为每个二进制字符串表达式创建并分配一个新字符串（var a = "foo" + " " + " bar"需要创建不少于4!个单独的对象在堆上 - 有人纠正我，如果我错了那个）。因此我们使用StringBuilder对象来批量处理字符串操作，直到被要求输入完整的字符串。

类似地，对DOM的修改迫使浏览器重新遍历每个节点，作为新树计算的一部分。我确信每个浏览器都会利用优化，但是没有办法避免DOM越大越复杂（嵌套），遍历操作就越昂贵。重用现有DOM节点可以被认为类似于使用StringBuilder进行重字符串连接。

最大限度地减少浏览器重新访问DOM节点的次数可以显着加快涉及添加或删除节点的操作的性能。

尽管如此，应该应用类似的“经验法则”适用于字符串连接：

• 如果树或操作次数很少，请不要冒汗
• 如果性能问题，首先要确定问题是什么 你认为它是
• 如果您有很多细微的变化，请将它们一起批处理
• 避免尝试解决不存在的问题
• （DOM）对象的拒绝可能会增加显着的复杂性。确保您了解此费用以确定是否值得。