javascript - Is chromes "appendChild" really that slow? - Stack Overflow

admin管理员组

文章数量:1315017

I have a framework that generates the DOM of an app pletely using document.createElement and document.appendChild. Now that the App gets bigger and bigger, I noticed that Chrome needs significantly longer to build the DOM as other Browsers.

So, I created the following performance test:

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

}

The results of this test are very interesting:

• Chrome 16: 700+
• Firefox 9: 560
• IE 9: 210
• Opera 11.60: 51

Chrome took more than 14-times more time to plete than Opera. And that´s not just a meaningless benchmark! I really can feel this difference in my app.

Is it normal that Chrome is that slow at DOM-operations? Is there a way to speed it up?

Thanks!

I have a framework that generates the DOM of an app pletely using document.createElement and document.appendChild. Now that the App gets bigger and bigger, I noticed that Chrome needs significantly longer to build the DOM as other Browsers.

So, I created the following performance test:

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

}

The results of this test are very interesting:

• Chrome 16: 700+
• Firefox 9: 560
• IE 9: 210
• Opera 11.60: 51

Chrome took more than 14-times more time to plete than Opera. And that´s not just a meaningless benchmark! I really can feel this difference in my app.

Is it normal that Chrome is that slow at DOM-operations? Is there a way to speed it up?

Thanks!

• javascript
• performance
• dom
• google-chrome

Share Improve this question Follow asked Jan 18, 2012 at 16:11 Van CodingVan Coding 24.6k2525 gold badges9292 silver badges137137 bronze badges 11

• 3 setTimeout seems likely to throw off your timing. – Domenic Commented Jan 18, 2012 at 16:13
• 2 @Domenic you need setTimeout in this kind of benchmark so that the browser actually does work before you get the time – Esailija Commented Jan 18, 2012 at 16:15
• 1 @Esailija not true, as shown in my perf test it's throwing you off: jsperf./appendchild-from-so Recall that setTimeout gets clamped to different values in different browsers. – Domenic Commented Jan 18, 2012 at 16:18
• 1 @Domenic How does jsperf have any relevance? Anyway: jsfiddle/rZzYk/2 – Esailija Commented Jan 18, 2012 at 16:23
• 2 @Domenic Yet it returns the correct result, which you can verify at least in chrome using the timeline tool. The rendering took 3.04s according to timeline, yet the first logged number is 600ms. That's because the browser only renders after logging of that time. If you defer the logging to be as soon as the thread is idle (I.E. setTimeout( , 0) you will get the time after rendering is done. – Esailija Commented Jan 18, 2012 at 16:31

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 5

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' the container before the appends, then show it again after. You may get a little bit of a flash, but that's probably better than a long delay.

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

This is the sort of performance increase that I would have expected from the documentFragment.

---

Update

After running a modified version of @Esailija's jsFiddle test to include the documentFragment, it doesn't seem to make any difference in Chrome (or Opera for that matter), so it appears as though Chrome is simply slower.

---

"Is there a way to speed it up?"

I'm guessing that you'll get better performance if you use a documentFragment, and then append to the DOM with a single .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;
    }
}

I think this is normal... .

The same goes for HTML Objects manipulation (width & height & opacity), especially if you're using CSS3.

I programmed a Slideshow (not using jQuery, i hate it) which is working smoothly... in FF, IE, Opera, Safari,... but not Chomre. In Chrome it is unbelievable slow (only in newer Chrome Versions, in old like v12 it was faster).

Your test appears flawed. If you do a pure appendChild test, Chrome es out way ahead:

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

本文标签： javascriptIs chromes quotappendChildquot really that slowStack Overflow