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

Question

根据stackoverflow的精神（感谢@Bill蜥蜴澄清这一点）我想介绍所有前端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. 深入测试树的创建，测试创建<table><tbody><tr><td><span>text构造。 DOM测试使用pair createElement / appendChild的顺序调用

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

   treeHelper("table", 
       treeHelper("tbody", 
           treeHelper("tr", 
   

不同的浏览器都会遵循测试结果。

亲爱的同事们请提供：在innerHTML更快的时候展示一些测试，在未上市的浏览器上开始我的测试。

Answer 1

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%

火狐（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行添加深度建筑树的测试（树的线性测试深度，树的深度测试（使用帮助））。发现大多数浏览器不喜欢堆栈分配值，因为线性appendChild，appendChild ...比在treeHelper（'table'，treeHelper（'tbody'，....

上做同样快得多）

Answer 2

根据对原始问题的评论，我在此处添加了一个答案，详细阐述了为什么直接.innerHTML到DOM manipulation的比较非常难以简明评估。

基本上有一些主要问题：

1. 浏览器错误＆amp;缺少实施
2. 内容差异（在案例A中效果更好，在案例B中效果可能更好）
3. 时间问题（JavaScript无法控制或洞察浏览器何时决定执行GC（垃圾收集）或运行其他线程/活动

1。）特别是IE（6,7＆amp;较小程度8）有一堆浏览器错误导致所有代码方案的完整测试。 （IE有错误，无法在.innerHTML，select，table，thead，tbody，{{1}设置tfoot将溢出设置为auto的空元素设置为auto，其中内容高度超过1“row”，内容包含重要空格等的tr元素。）

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

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

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

我在家里有一些旧的测试，我会挖掘并添加到这个答案中进行更多的测试。