Your raw JavaScript code has a lot of optimization that is missing in your
jQuery version. In the raw version, you cache the results of the
document.getElementById calls. In the jQuery version, you don't do any of
that, and in fact you repeat the same jQuery selector calls twice each.
It any surprise that the optimized code is faster? :-)
Note that there is quite a bit more optimization you can do in both
versions. For example, all of the json[eid][type][ascii] references - you
should be saving references as you go along:
var jsonEid = json[eid];
for (var type in jsonEid) {
var jsonType = jsonEid[type];
for (var ascii in jsonType) {
var jsonAscii = jsonType[ascii];
// now use jsonAscii where you were using json[eid][type][ascii]
Keeping references like this saves a lot of name lookups. The same is true
for $() jQuery selector calls, and even more so. Where you use $('#'+type)
twice in row, instead do:
var $type = $('#'+type);
var html = $type.html() +...;
$type.html( html );
Also, where you use $('#tagsSelect') twice every time through the loop,
instead add this code OUTSIDE the loop:
var $tagsSelect = $('#tagsSelect');
And then inside the loop you'll use:
var all = $tagsSelect.html() +...;
$tagsSelect.html( all );
That eliminates the overhead of running the jQuery selector twice every time
through the loop.
The jQuery code will still be slower than the raw JavaScript, and where
speed is critical there's nothing wrong with dropping down to straight DOM
calls. But optimizing your jQuery calls will bring it much closer.
-Mike
> From: pkeane
>
> Hi folks-
>
> I am getting some troublesome benchmarks on a bit of code and I wonder
> if I am missing something. I am iterating over a JSON object to
> dynamically create a menu. The jQuery code consistently takes over
> 5000 milliseconds (!) to complete and my raw javascript version
> consistently takes less than 500 milliseconds. That means jQuery is
> more than 10 times slower for this code than raw javascript.
>
> I am including all of the code (both raw javascript and jQuery
> versions) as well as the sample JSON data that I used.
>
> any help/advice would be appreciated.
>
> -Peter Keane
>
> var tags={}; //used by basic javascript version
> tags['tagsSelect'] = document.getElementById('tagsSelect'); //used by
> basic javascript version
>
> var start = new Date();
>
> for (var type in json[eid]) {
> for (var ascii in json[eid][type]) {
>
> /* basic javascript version */
>
> tags['tagsSelect'].innerHTML = tags['tagsSelect'].innerHTML + "<input
> type='checkbox' name='" + ascii + "'> " + json[eid][type][ascii] + "</
> input><br>\n";
> tags[type] = tags[type] ? tags[type] : document.getElementById(type);
> if (tags[type]) {
> tags[type].innerHTML = tags[type].innerHTML + "<li><a href='" + eid
> + "/tag/" + ascii + "'>" + json[eid][type][ascii] + "</a></li>\n";
> }
>
> /* jQuery version */
>
> var all = $("#tagsSelect").html() + "<input type='checkbox' name='" +
> ascii + "'> " + json[eid][type][ascii] + "</input><br>\n";
> $("#tagsSelect").html(all);
> var html = $("#" + type).html() + "<li><a href='" + eid + "/tag/" +
> ascii + "'>" + json[eid][type][ascii] + "</a></li>\n";
> $("#" + type).html(html);
> */
>
> }
> }
>
> var end = new Date();
> alert(end - start); //display execution time in milliseconds
>
>
> Here is the JSON:
>
> {"pkeane":
> {
> "slideshow":
> {"educause_no_1":"educause no 1","educause_slides":"educause
> slides","educause_backups":"educause backups","saved_images":"saved
> images","tcdl":"tcdl","test_tcdl":"test tcdl","top_hats":"top
> hats","zoom":"zoom","tddp_mockup":"tddp mockup","tgdp_mocks":"tgdp
> mocks","dase_workshop":"dase workshop"},
> "user_collection":
> {"test_20":"test","rebuild_this":"rebuild
> this!","blues_1":"blues_1","new_test":"new test","ok_new_semester":"ok
> new semester","ssss":"ssss","matisse":"matisse","ben_shahn":"ben
> shahn"},"cart":{"keanepj":"My Cart"},
> "subscription":
> {"texas_politics_feature_of_the_week":"Texas Politics Feature of
> the
> Week","aeneid7_8":"Aeneid7-8","agamemnon":"Agamemnon","rome_da
> y_1":"Rome
> day 1","alor_charts":"alor charts","frank_lloyd_wright":"Frank Lloyd
> Wright","tigerfeed":"tigerFeed","clarke_alor_3_1":"Clarke, ALOR 3"
> }
> }
> }
>
