DOM元素创建vs.innerHTML vs.Direct

DOM Element Creation vs. .innerHTML vs. Direct

本文关键字：vs innerHTML Direct 创建 元素 DOM      更新时间：2023-09-26

在生成动态内容时，哪种方法最好简单地创建HTML并将其插入.innerHTML中，还是直接在DOM中创建元素？

我不关心复杂性或其他问题。只是在客户端上处理时间。

哪个更快？

如果我必须按照效率（低处理时间）的顺序猜测，这将是：

  1. DOM创建
  2. .innerHTML属性插入
  3. 直接写入

这将与实施的复杂性成反比：

  1. 直接写入
  2. .innerHTML属性插入
  3. DOM创建

这是一个验证问题？在考虑复杂性和速度时，有人能验证这是确定如何更新客户端（即javascript）的权衡吗？

研究：

我不像他们在这里那样关心安全问题->InnerHTML与DOM-安全

InnerHTML与DOM这不是重复的，因为它只涵盖了我问题的一部分。

根据我的经验，它们的性能基本相当。但是，如果使用DOM方法，则可以更好地访问闭包的功能，从而可以将数据和函数直接绑定到各个DOM元素。

为了提高性能，无论采用何种方法，最重要的是隐藏或删除要修改的DOM部分，在DOM之外进行所有更改，然后将其作为一个单独的操作放回DOM中，以避免浏览器中不必要的回流（重新绘制）。

根据我自己的个人测试，它们都足够快，可以满足大多数需求。但是，如果你正在做一些疯狂的事情，比如在一个页面上创建数千个元素，那么最快的方法就是使用文档片段。John Resig为此写了一篇很好的博客文章。http://ejohn.org/blog/dom-documentfragments/

DOM插入不一定比更新innerHTML快，请参阅http://segdeha.com/experiments/innerhtml/和http://www.quirksmode.org/dom/innerhtml.html例如实现innerHTML解决方案可能会更快，只需注意，在使用XHTML时它不可用。

许多jsPerf基准测试都涵盖了这个主题；尝试在web上搜索"jsperf-innerhtmldomelement"或其他有意义的搜索组合。

相关文章：