通过innerHTML进行DOM操作的性能测试

Question

根据 stackoverflow 的精神（感谢 @Bill the Lizard 澄清了这一点），我想介绍一下自己对所有前端 Web 开发人员都熟知的问题的小型研究。

如何在使用innerHTML或DOM操作进行DHTML编程时获得更好的jscript性能？

为了进行测试，我创建了带有“开始测试”按钮的单个 HTML 页面，该页面运行了 5000 次函数对，该函数是根据 innerHTML 意识形态或 DOM 编写的。 （可以在： http://codepad.org/HyiKRsNk ）

• 避免显示比较 CPU 结果以百分比表示，一个函数比另一个函数快的程度。因此，如果您看到（17％），则意味着 DOM 更快的innerHTML，如果（可能是后者）您看到（-5％），则意味着innerHTML 比 DOM 更快。
• 为了避免内存爆炸的影响，对于每个调用，都会在测试后立即创建和删除新的“测试区域”（不遇到创建/删除的时间）。
• 测试在 display:none div 下执行，以避免滚动时翻转和性能下降

我准备了 3 个测试（@tomdemuyt 提出的最后一个）

1. 为其创建新的 DIV 和子文本

2. 删除一些DIV（为了避免创建差异的影响，两个测试都使用相同的方式创建测试div，但删除不同）

3. 添加 onclick 事件处理程序

4. 深入测试树的创建，测试创建 ;

   文本构造。 DOM 测试使用 createElement/appendChild 对的顺序调用

5. 与 (4) 类似，但创建了 2 行 。 DOM 使用特殊的辅助函数来简化：

   treeHelper("表", 
       树助手（“tbody”， 
           树助手（“tr”， 
   

针对不同浏览器的测试结果如下。

所以亲爱的同事，请提供：当innerHTML更快时显示一些测试，在未列出的浏览器上开始我的测试。

Answer 1

根据对原始问题的评论，我在此处添加了一个答案，详细说明了为什么很难简洁地评估直接 .innerHTML 与 DOM 操作 的比较。

本质上有几个主要问题：

1. 浏览器错误和问题。缺少实现
2. 内容差异（在情况 A 中效果更好，在情况 B 中可能效果不佳）
3. 时间问题（JavaScript 无法控制或洞察浏览器何时决定进行 GC（垃圾收集）或运行其他线程/活动

1. ）特别是 IE（6,7 和较小程度的 8）有一堆浏览器错误，导致对所有代码场景进行全面测试。 （IE 有错误，无法在 select、table、thead、上设置 .innerHTML >tbody、tfoot、tr，溢出设置为 auto 的空元素，其中内容高度超过 1“行”，pre< /code> 元素，其中内容包含重要的空格等。)

2.) 添加的子节点的数量、类型（顺序）和深度将改变操作的性能。例如，通过添加表标签，然后添加 tbody，然后添加 tr，然后添加 td，然后添加内容来添加表，而不是单独构建该表并将其转储到页面中，这会改变性能。

3.) 浏览器控制何时执行 GC（这会在清理时使浏览器减慢一段时间）。与浏览器扩展或另一个选项卡中的 AJAX 调用类似，IE8 中的 Web 切片会轮询服务器以获取更新，这将影响当前页面的执行方式。

因此，如果您想对此进行全面测试，则需要测试 HTML 子结构的几种不同组合，我非常希望结果会有所不同。

我家里有一些针对此类事情的旧测试，我将挖掘这些测试并将其添加到此答案中以进行更多涉及的测试。

Answer 2

Opera (10.54):

Test                                Result 
1.insert new element and text         30.00%
2.removeChild vs innerHTML=''         66.67%
3.set event handler                   245.45%
4.test in depth of tree linear        -62.16%
5.test in depth of tree (using helpr) -67.10%

Chrome (5.0.375.70):

Test                                 Result
1.insert new element and text          318.18%
2.removeChild vs innerHTML=''          53.85%
3.set event handler                    150.00%
4.test in depth of tree linear         41.67%
5.test in depth of tree (using helpr) -33.03%

FireFox(3.6.4):

Test                                  Result
1.insert new element and text           76.17%
2.removeChild vs innerHTML=''           50.56%
3.set event handler                     1097.44%
4.test in depth of tree linear          32.94%
5.test in depth of tree (using helpr)   9.66%

IE(8):

Test                                  Result 
1.insert new element and text           46.92%
2.removeChild vs innerHTML=''           26.34%
3.set event handler                     936.17%
4.test in depth of tree linear          -35.42%
5.test in depth of tree (using helpr)   -67.26%

编辑(1):
为每个浏览器添加了 2 行，用于深度构建树的测试（线性树深度测试、树深度测试（使用 helpr））。人们发现大多数浏览器不喜欢堆栈分配值，因为线性的appendChild，appendChild ...比在treeHelper（'table'，treeHelper（'tbody'，...）上做同样的事情要快得多。