Thanks for the speedy & thoughtful reply! This helps me quite a
bit....
best-
Peter Keane
On Oct 10, 1:01 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> 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"
> > }
> > }
> > }
