chrome“appendChild”真的那么慢吗？

Question

我有一个完全使用document.createElement 和document.appendChild 生成应用程序DOM 的框架。现在应用程序变得越来越大，我注意到 Chrome 与其他浏览器一样需要更长的时间来构建 DOM。

所以，我创建了以下性能测试：

window.onload = function(){
    var now = new Date().getTime();
    for(var i = 0; i < 10000; i++){
        document.body.appendChild(document.createElement("div"));
    }
    setTimeout(function(){
        console.log(new Date().getTime() - now);
    },0);

}

这个测试的结果很有意思：

• 铬 16：700+
• 火狐9：560
• IE 9:210
• Opera 11.60: 51

Chrome 的完成时间是 Opera 的 14 倍多。 这不仅仅是一个毫无意义的基准！我真的可以在我的应用中感受到这种不同。

Chrome 在 DOM 操作上这么慢是正常的吗？ 有没有办法加快速度？

谢谢！

Answer 1

更新 2

这是一种骇人听闻的解决方案，可能值得进行一点浏览器检测。它使我的测试性能降低到不到原来的 ¹/₁₀。

你可以在追加之前display='none'容器，之后再显示。你可能会得到一点闪光，但这可能比长时间的延迟要好。

window.onload = function(){

    var content = String.fromCharCode(Math.floor(Math.random() * 1000));

       // cache it in case it is already set
    var disp = document.body.style.display;

    document.body.style.display = 'none';

    var now = new Date().getTime();

    for(var i = 0; i < 10000; i++){
        document.body.appendChild(document.createElement("div"))
          .appendChild(document.createTextNode( content ));
    }

    setTimeout(function(){
        console.log(new Date().getTime() - now);
        document.body.style.display = disp || ''; // restore it
    },0);
};

这是我对documentFragment 的预期性能提升。

---

更新

在运行 modified version 的 @Esailija's jsFiddle 测试以包含 documentFragment 之后，它似乎在 Chrome（或 Opera 中）没有任何区别，因此它显示为虽然 Chrome 更慢。

---

“有没有办法加快速度？”

我猜如果您使用 documentFragment，然后使用单个 .appendChild 附加到 DOM，您将获得更好的性能。

window.onload = function(){
    var now = new Date().getTime();

      // create a documentFragment
    var frag = document.createDocumentFragment();

    for(var i = 0; i < 10000; i++){
        frag.appendChild(Div());  // append to the documentFragment
    }

      // append the documentFragment (which is emptied)
    document.body.appendChild(frag);

    setTimeout(function(){
        console.log(new Date().getTime() - now);
    },0);

    function Div(){
        var This = document.createElement("div");
        return This;
    }
}

Answer 2

我觉得这很正常……

HTML 对象操作（宽度、高度和不透明度）也是如此，尤其是在您使用 CSS3 时。

我编写了一个幻灯片（不使用 jQuery，我讨厌它），它在 FF、IE、Opera、Safari 中运行顺利……但在 Chomre 中却没有。在 Chrome 中，速度慢得令人难以置信（仅在较新的 Chrome 版本中，在 v12 等旧版本中速度更快）。

Answer 3

您的测试似乎有缺陷。如果你做一个纯粹的appendChild 测试，Chrome 会遥遥领先：

http://jsperf.com/appendchild-from-so