JSON, XML, performance
JSON is far better than XML! Less code to transfer - faster parsing - happy user. Right ? Hold that thought for a minute…
jQuery makes it pretty easy to manipulate XML; lured by which we began using jQuery in a big way in our product. After some time we realized that the growing mound of JavaScript was causing significant performance penalties. We began to see the “Unresponsive Script” message while the browser memory was steadily rising. Thanks to the firebug profiler we caught some of our goofs but were still not very happy on the performance front. While attempting to parse and render large XML files (an average of 1000 to 2000 nodes nested 5 levels deep) we saw delays of 3-4 seconds. Firefox on mac was showing the spinner of death!
Alarmed we thought of removing nesting and moving the whole thing to JSON. No parsing - no creating JS objects means better performance and a happy user right ? Wrong! It became a lot worse - 3 seconds became 15 and IE would just freeze. Some searching led us to John’s blog and to native JSON parsing. John gives a fair picture of how long it takes to parse JSON in comparison to XML.
And that is with just 1600 nodes of date records, think of 200 nested arrays and such! Solution and strategies to this will hopefully be in another post.
PS: IE8 and Firefox 3.5 have native JSON support. But IE7 doesn’t and its going to take a while before our customers move to IE8.
Posted in JavaScript | Permalink | Trackback
May 1st, 2009 at 3:29 pm
I may be mistaken, but isn’t the graphic that you’ve selected comparing the speed of HTTP transfer through XMLHttpRequest and the speed of the json.js parsing?
The graphic that appears to be depict a comparison between JSON and XML is this one: http://ejohn.org/apps/jsonvxml2/json-speeds-md.png
Oddly, this graphic appears to favor JSON over XML in speed past 400 nodes, contrary to what you experienced. Plus, the JSONP method is what is commonly utilized today, so the JSON speed would be even faster in comparison.
This, of course, doesn’t explain your results.
May 1st, 2009 at 3:36 pm
If you read the first line of the second para following the graphic viz.
“Additionally, the processing time that json.js takes is completely blocking..”
you might agree. Its not the transfer that seems to be taking time but the post processing and parsing.
May 1st, 2009 at 5:45 pm
I think you meant this graphic: http://ejohn.org/apps/jsonvxml/jsonvxml.png
The different is JSON is still faster but the templatizing of JSON into DOM is what takes time. XML on occasion you can just take the returned object and inject it into the DOM. JSON you have to parse it and add objects to the DOM.
But this is a moot point as many times content returned is not directly injected but pieces of data are parsed and injected.
May 31st, 2009 at 1:46 pm
Not sure what you want to do once you get your big JSON. But if you want to render it in HTML you could be interested by the PURE library. http://beebole.com/pure
Thanks for the monad’s post. I’m still trying to figure out how I could use it.
November 17th, 2009 at 8:55 pm
When taking into account the improvement of XML parsing technology, such as vtd-xml, the peformance edge of XML over json would only increase