Injected JavaScript Object Notation (JSONP) | January 25th, 2006
I had a few comments on one of my previous posts from Brad Neuberg and Will (no link for him). Brad suggested using script injection rather than XHR + eval() to instantiate JavaScript objects as a way of getting around the poor performance that Will was having with his application (he was creating thousands of objects using eval(jsonString) and it was apparently grinding to a halt).
As a quick test I created a JavaScript file to inject into a web page using:
var s = document.getElementById("s");
s.src="test.js";
The script file contained an object declaration using the terse JSON type of format like:
var myObj = {"glossary": [
{"title": "example glossary","GlossDiv":
{"title": "S","GlossList": [
{"ID": "SGML","SortAs": "SGML","GlossTerm": "Standard Generalized Markup Language","Acronym": "SGML","Abbrev": "ISO 8879:1986","GlossDef": "A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso": ["GML", "XML", "markup"]
}]
}}
]}
(this is the sample found here)
I compared this with the bog standard:
var myObj = eval(jsonString);
I timed these two methods running on my localhost to avoid network effects on the timing for the injected script as much as possible and the eval() method had the same poor results as usual but the injected script was uber fast on IE 6. I have not checked Mozilla yet.
In the real world then one might want to have a resource such as http://server/customer/list?start=500&size=1000&var=myObj which would return records 500 to 1500 of your customer list but rather than pure JSON it would return it in a format that can be run as injected script and the result of this would be the instantiation of a variable called myObj (as specified in the querystring) that would refer to an array of those customers requested. Pretty simple and fast - the only drawback being that you are no longer returning purely data.
January 25th, 2006 at 11:21 pm
Hey Dave; thanks for benchmarking this. I had thought injected scripts would be faster, but I actually hadn’t benchmarked them to make sure.
You did some great XSLT vs. JSON performance benchmarks awhile back; did you also check how injected scripts fared in that run off? If I remember correctly, you found that XSLT for large datasets was the most generically faster way to do things cross browser. Does that still hold up?
One thing thats interesting is that if you are creating a large amount of DOM nodes on screen based on your data, the XSLT approach will probably be the fastest (versus grabbing the JSON data and turning it into DOM nodes manually using JavaScript).
By the way, there is already a standard brewing around being able to do exactly what you have in your script tag, called JSONP. This is a way to load JSON data (from any arbitrary domain), and give it a callback value so you can know when it is done and which has the data:
April 9th, 2006 at 3:23 pm
Yeah I thought that JSONP did pretty much exactly that but was too lazy to look it up
I am not quite sure which will be faster yet - I am in the process of re-working my benchmarking code so that I can release it along with a few other little bits and bobs - PPK of quirksmode keeps hassling me. Once I get it done I will re-do the benchmarks for XSLT, JSON, JSONP and J4X (one of my new bits). Should be soon now though!
Currently I am thinking about (not hacking it quite yet) making a JavaScript Active-Record (http://www.martinfowler.com/eaaCatalog/activeRecord.html) tool and putting it on top of AMASS (kudos for building that).
We are located in Vancouver and are currently in the thick of building a custom cross browser AJaX Spreadsheet component for a client based on our current AJaX Grid product (http://developer.ebusiness-apps.com). Oh yeah and I am trying to finish my damn phd thesis
We should be down in the Bay Area a few times this year for conferences etc so I will certainly let you know and maybe we can grab a beer.