chromes“appendChild”真的那么慢吗？

我有一个框架，可以完全使用以下方式生成应用程序的 DOMdocument.createElement and document.appendChild。现在应用程序变得越来越大，我注意到 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);

}

这个测试的结果非常有趣：

• Chrome 16：700+
• 火狐 9：560
• IE 9：210
• 歌剧 11.60：51

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

Chrome 在 DOM 操作上那么慢正常吗？ 有办法加快速度吗？

Thanks!

Update 2

Here's a hackish sort of solution, that may be worth a little browser detection. It brings the performance in my testing down to less than ¹/₁₀ of what it was.

You can 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.

Update

运行后修改版 http://jsfiddle.net/rZzYk/3/ of @Esailija的 https://stackoverflow.com/users/995876/esailijajsFiddle 测试包括文档片段，它似乎在 Chrome（或 Opera）中没有任何区别，因此看起来 Chrome 只是速度较慢。

“有什么办法可以加快速度吗？”

我猜如果你使用的话你会获得更好的性能documentFragment，然后使用一个附加到 DOM.appendChild.

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;
    }
}