0

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

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

在 JS 中创建它们效率低还是没关系？

谢谢

4

2 回答 2

4

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

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

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

于 2013-05-02T16:43:09.197 回答
1

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

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

同样，对 DOM 的修改会迫使浏览器重新遍历每个节点，作为新树计算的一部分。我确信每个浏览器都会利用一些优化，但无法避免这样一个事实，即 DOM 越大、越复杂（嵌套），遍历操作的成本就越高。可以认为重用现有的 DOM 节点类似于使用 aStringBuilder进行重字符串连接。

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

也就是说，应该应用与字符串连接类似的“经验法则”：

  • 如果树或操作数量很少，请不要担心
  • 如果性能是问题，请先配置文件以确保问题是您认为的问题
  • 如果您有很多小的更改，请将它们一起批处理
  • 避免尝试解决不存在的问题
  • （DOM）对象的重用可能会增加显着的复杂性。确保您了解此成本，以帮助确定它是否值得。
于 2013-05-02T17:27:45.053 回答