IE9+: poor performance while dealing with DOM

Question

Compared to other browsers, IE9 executes this script (for dynamic manipulation of DOM) with a very long running time. I am curious; in what ways would it impact the execution speed of next-generation rich applications? Other than this iterative test, is there any related real world webapp example, where we can observe the difference in performance? Also, is it the problem with their JS engine or the Layout engine?

Update:

The issue is resolved in IE10 RTM.

I agree! This is very strange and excellent example of poor performance (~0.140s of Safari vs ~44s). I wonder how would and how much would it impact the real world and next-gen rich web apps? So we can devise good practices while considering the support for IE9+ browsers. — vulcan raven, Sep 25 '11 at 01:40

score 1 · Accepted Answer · answered Sep 24 '11 at 14:59

1

Use:

function testAppendFrag(div) {
    var docFrag=document.createDocumentFragment(),i=count;
    while(i--){
        docFrag.appendChild(document.createElement("div"));
    }
    div.appendChild(docFrag.cloneNode(true));
}

answered Sep 24 '11 at 14:59

Darm

5,581
2
20
18

Using docucmentfragments would improve the code significantly. – Raynos Sep 24 '11 at 15:06
Thank you. Matter of fact, the performance issue is not with the testAppend function. Would be very helpful if you can elaborate the implementation of testRemoveFrag function. :-) – vulcan raven Sep 24 '11 at 16:20
1

@vulcan Detach the DIV from the DOM. Remove the child elements. Attach the DIV back to the DOM. The idea is to perform DOM-manipulation "off-DOM", ergo, to touch the live-DOM as little as possible. – Šime Vidas Sep 25 '11 at 03:28
1

Thanks, it certainly makes sense. Can you explain, how other browser vendors, like Firefox, able to execute the same code without documentfragment more swiftly (with a considerable speed difference)? Are they doing this fragmentation automatically, or some other technique is used? – vulcan raven Sep 25 '11 at 03:57
@ŠimeVidas, I used [Compact Inspector](http://bit.ly/ze02w3) on a page using DocumentFragment and it gave me this error: `Document fragments no longer expose Document APIs. This is a deliberate change in IE9 mode and up for interoperability with other browsers and compliance with `[`DOM Level 3 Core`](http://www.w3.org/TR/DOM-Level-3-Core/)`. Resolution: • If querying for elements, use an alternative API like` [`querySelectorAll`](http://msdn.microsoft.com/en-us/library/cc304115(VS.85).aspx)`• Otherwise, use a full Document instance instead of a DocumentFragment` – vulcan raven Jul 02 '12 at 05:28
@vulcanraven What method are you invoking on the document fragment? (What invocation exactly is the cause of the error?) – Šime Vidas Jul 02 '12 at 11:26
@ŠimeVidas, further it says `The test warns when a page tries to access getElementById off a document fragment. The verifier uses *querySelector* to simulate *getElementById* behavior.` The script is calling `getElementById` on document fragment. – vulcan raven Jul 02 '12 at 13:13
@vulcanraven Use `frag.querySelector( '#foo' )` instead of `frag.getElementById( 'foo' )`, where `frag` is your document fragment, and `'foo'` is the ID. (Notice the `#` in the first string value). The `getElementById` method is not defined on document fragments, but only on documents. – Šime Vidas Jul 02 '12 at 13:35

IE9+: poor performance while dealing with DOM

Update:

1 Answers1

Linked