Question

I have a framework that generates the DOM of an app completely 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 complete 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!

Answer 1

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