XML Parsing vs DOM Implementation create methods

Question

I remember well that using the DOM implementation to create new HTML elements on a document was considered to be very much slower than assigning an HTML string to the 'innerHTML' property of the applicable HTML element.

Does the same apply when authoring XML documents using JavaScript? Rather than using the DOM implementation's various create methods, would it be faster to just generate the XML string and parsing it?

Just something I wondered about.... :)

*EDIT - Added an example *

Which is faster? (I'll be using jQuery's parseXML function to do the parsing example):

var myXdoc = $.parseXML("<person><name>Bob</name><relation>Uncle</relation>");

Or

var myXdoc

if (window.ActiveXObject) {
    myXdoc = new ActiveXObject("Microsoft.XMLDOM");
    myXdoc.async = false;
}
else if (document.implementation && document.implementation.createDocument)
    myXdoc = document.implementation.createDocument("", "", null);

var p = myXdoc.documentElement.appendChild(myXdoc.createElement("person"));
var n = p.appendChild(myXdoc.createElement("name"));
n.appendChild(myXdoc.createTextNode("Bob"));
var r = p.appendChild(myXdoc.createElement("relation"));
r.appendChild(myXdoc.createTextNode("Uncle"));

Are you asking is it faster to use innerHTML to to parse an xml string? Or is there an innerXml implementation I don't know about? — Crescent Fresh
– Crescent Fresh, Commented Oct 12, 2011 at 9:43
No, I was comparing the use of innerHTML to that of using parsing XML. Just as innerHTML was faster than using for example document.createElement("table"). — NeilC
– NeilC, Commented Oct 12, 2011 at 10:08

styrr · Accepted Answer · 2011-10-12 11:15:53Z

1

The first thing we have to know why createDocument() might be slow. The reason is that the DOM is alive and if you are modifying it, it triggers a re-validation of the DOM tree and probably a redraw of the site. Every time. But we could avoid this unnecessary re-validation and re-draw by using createDocumentFragment(). The DocumentFragment isn't part of the DOM and so it wont trigger any events. So you can build your complete DOM part and in the last step append it to the DOM tree. I think it's the fastest way to create large DOM parts.

UPDATE I tested it in Firefox 7 using Firebug. The code:

console.time("a");
for(var i=0; i<1000; i++) {
$.parseXML("<person><name>Bob</name><relation>Uncle</relation></person>")
}
console.timeEnd("a");

console.time("b");
for(var i=0; i<1000; i++) {
var myXdoc
if (document.createDocumentFragment) {
    myXdoc = document.createDocumentFragment();
}
var p = myXdoc.appendChild(document.createElement("person"));
var n = p.appendChild(document.createElement("name"));
n.appendChild(document.createTextNode("Bob"));
var r = p.appendChild(document.createElement("relation"));
r.appendChild(document.createTextNode("Uncle"));
}
console.timeEnd("b");

The result: "a" about 140ms and "b" about 35ms. So the string parse version is slower.

UPDATE2 It's very likely that the second variant is faster in any other browser, too. Because the parse method has to build the DOM object too and it's very likely that it uses the same methods (e.g.: document.createElement). So the parse method can't be faster. But it's slower because it has first to parse the string.

edited Oct 12, 2011 at 11:15

answered Oct 12, 2011 at 9:53

styrr

8294 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NeilC Over a year ago

I know this is the approach jQuery uses to speed up the creation of new HTML elements. But the usual implementation starts with a string representation of the intended HTML. I will update my question with an example.

NeilC Over a year ago

I had a look at how jQuery "parses" the HTML string I mentioned above. It turns out that innerHTML is not exclusively used. Through a series of regular expressions & other string functions, they build the HTML nodes using both the innerHTML property and some DOM implementation.

NeilC Over a year ago

Thanks a lot, I have already identified some places in my code where performance gains can be made switching from parsing to DOM implementation.

Collectives™ on Stack Overflow

XML Parsing vs DOM Implementation create methods

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related