Internet Explorer Javascript 性能问题答案

【问题标题】：Internet Explorer Javascript performance problemInternet Explorer Javascript 性能问题
【发布时间】：2009-04-03 18:46:14
【问题描述】：

Internet Explorer 中的 JavaScript 性能很差。那里没有消息。但是，有一些提示和技巧可以加快速度。比如有这个three part series。我仍然发现自己无法从中获得体面的表现。也许你们中的一些人知道还有什么办法可以更快？

我想做的是用 Javascript 从头开始创建一个中等大小的表。比如说，300 行，每行 10 个单元格。在我的计算机上执行此操作大约需要 5-6 秒。好吧，当然，这是一个 5 岁的钻机，但这仍然太多了。这是我的虚拟代码：

<html>
  <body>
    <script type="text/javascript">
      function MakeTable(parent)
      {
        var i, j;
        var table = document.createElement('table');
        var insertRow = table.insertRow;
        for ( i = 0; i < 300; i++ )
        {
          var row = insertRow(-1);
          for ( j = 0; j < 10; j++ )
          {
            var cell = row.insertCell(-1);
            cell.innerHTML = i + ' -  ' + j;
          }
        }
        parent.appendChild(table);
      }
    </script>
    <div onclick="MakeTable(this);">Click Me!</div>
  </body>
</html>

已添加： 嗯，显然字符串连接（使用 array.join）是唯一的方法。嗯，当然很伤心。希望以“正确的”DOM方式来做。 :)

【问题讨论】：

标签： javascript internet-explorer performance

【解决方案1】：

这是我在寻找答案时发现的一个有趣的链接：该页面使用五种不同的脚本/方法来生成表格。
根据他们的测试，使用字符串远远快于使用 DOM / Table 元素。 http://www.quirksmode.org/dom/innerhtml.html

【讨论】：

【解决方案2】：

IE 性能问题的主要原因之一是 DOM 操作。您希望尽可能高效地进行 DOM 操作。这可以包括，根据您的情况（基准！）：

离线创建你的DOM结构；将顶级元素保留在文档之外（创建，但不追加），然后在文档准备好时将其追加到文档中，而不是在创建时将每个元素追加到 DOM 中
编写 innerHTML 而不是 DOM 操作

【讨论】：

第一个提示已经存在。看 - 表格在最后被添加到 DOM 中。我现在正在探索 innerHTML，它确实似乎更快。
是的，我应该提到这一点。但它并不总是更快，这就是为什么我要提到“基准！”部分:-)

【解决方案3】：

您可以尝试“Duff 的设备”：通过多次重复代码来展开循环：

for (var i = 0; i < count / 4; i++) {
  doSomething();
  doSomething();
  doSomething();
  doSomething();
}

显然，除以 4 时剩下的余数，原来的 Duff's Device 有一个巧妙的方法，使用与循环混合的 switch 语句跳转到循环的中间。 Javascript 不支持这一点，但您可以手动处理其余行。另外数字4是随机的，数字本身可以通过性能测试得出。

另请参阅：http://www.websiteoptimization.com/speed/10/10-3.html

【讨论】：