最快DOM插入

Question

做DOM插入的最佳实践是什么？

• 在循环中一次插入大量的html vs元素会更快吗？
• 您要插入哪些html，还是只需要插入多大的块？
• 插入表比使用表黑客插入行更快吗？

Answer 1

innerHTML插入速度略快于DOM操作1:1，在实际插入多个节点和属性等情况下获得的好处更多。但是，由于它本质上是一种伪装起来的eval语句，所以它更容易出错，也更危险。

根据我的经验，现在JS是如此之快，以至于innerHTML的速度增长并不能证明除了最大的插入/迭代批之外的风险。

长话短说，您希望尽可能少地执行DOM操作，因此创建插入层次结构时的一个技巧是在内存中针对彼此创建它们，然后在最后可能的时刻将最高的元素插入DOM中。这使得浏览器的呈现更新最少。当然，我们说的是几毫秒.

Answer 2

设置innerHTML通常比插入分离的节点更快。

另一种可能是创建一个DocumentFragment，它允许同时插入节点。使用DocumentFragments的另一个优点是，它们可以很容易地成为克隆，它可以为innerHTML替换很多用例，而且由于不涉及解析，它可能更快。

Answer 3

在许多情况下，innerHTML实际上是慢的，然后是直接的DOM操作。查看jsperf上的基准测试

没有“正确的答案”，您必须为特定的用例找到合适的、最有效的方法。