javascript - "document.createElement"性能

标签 javascript jquery performance dom createelement

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

最佳答案

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

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

关于javascript - "document.createElement"性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26034314/

相关文章:

iPhone 和顶点缓冲区对象

c# - 如何将 JavaScript double 组转换为 .NET double 组?

javascript - 在大屏幕上使 material-ui 网格环绕

javascript - 如何求和已检查更改的复选框 jquery 的值?

javascript - 如何防止用户多次点击链接图片?

javascript - 如何在 $(document).ready(function(){}) 中使用 for 循环?

performance - 现实生活中的人队列数据结构

javascript - Safari 不会在溢出的 SVG 内容上发出指针事件

javascript - Ionic 3,右侧使用网格在 ionic 输入中带有图标

mysql - 最少按不同分组 - SQL