“document.createElement”性能

Question

我想在弹出窗口中创建许多行来使用 for 循环显示我的数据，我使用文本字符串来创建和附加 div ，但是我发现 document.createElement 是高性能的，并使用了提高性能 20% 的方法，但由于我填充了 1000 行，document.createElement 创建元素所需的时间非常高。有没有办法通过一次创建元素并在大量实例中重用它来提高性能，对此的任何建议将不胜感激

Answer 1

创建元素后，您可以使用Element.cloneNode() 复制它。它与document.createElement() 花费相同的时间，但有一个优势：如果您在元素上设置了多个属性或childNodes/innerHTML，您也可以通过调用Element.cloneNode(true) 来复制它们。

大部分时间都在 DOM 插入新创建的元素，因此每个新元素的插入都很慢。更快的方法是创建一个documentFragment，将所有新元素附加到您需要的结构中，然后将完整的片段添加到 DOM。