Comments on: Speed Up the jQuery Code: Selectors’ Cache

By: Greg

Greg — Fri, 25 Jun 2010 05:44:12 +0000

@Dan Beam – I don’t care about it faster or not, but for tip “console.log” very big Thanks

By: Stoimen

Stoimen — Thu, 24 Jun 2010 07:10:12 +0000

@Dan Beam – I know I’m accessing the DOM of course, and I know also this is a slow operation. While there are different techniques of optimizing, here I think the test is correct just because it’s using the same DOM access methods. Thus I suppose only the selector is changing the performance results!

greetings,
stoimen

By: Dan Beam

Dan Beam — Wed, 23 Jun 2010 21:02:22 +0000

@haliphax – You’re missing the point – it’s about client-side performance. if you want to change alot of UI stuff or update many different parts of the DOM tree you’ll have to find a way to reference those Nodes (through a selection engine or DOM methods). You don’t want your website to suck or be stuck in the 90s, do you?

I don’t think that your test is stressing the right area. I thought from the title it’d be simply reading / selecting / parsing the DOM, but you’re also setting the innerHTML of an element as well (which requires it to re-parse that text and create a DOM Node tree).

It seems like a test truer to this title (simply caching selectors) would be something like this:

    // Without caching

    $([1,2,3,4,5]).each(function () {
        for (var i = 0, start = +new Date; i < 100000; ++i) {
            $('#sponsors').attr('class');
        }
        console.log(+new Date - start);
    });

    // With caching

    $([1,2,3,4,5]).each(function () {
        for (var i = 0, $sponsors = $('#sponsors'), start = +new Date; i < 100000; ++i) {
            $sponsors.attr('class');
        }
        console.log(+new Date - start);
    });

Which yielded the results (on a site I used to work on, http://lalive.com/)

So, here we see a more pronounced difference.

By: haliphax

haliphax — Wed, 23 Jun 2010 14:16:09 +0000

@Teppo: It’s Javascript. Does the number of users visiting the site even come into play here? It’s not as if you’re saving bandwidth or server CPU cycles with a “cached” query vs. an “ad-hoc” query in this circumstance… all of the code is executed on the client’s machine–not on the server.

By: Teppo

Teppo — Mon, 21 Jun 2010 08:25:53 +0000

“Little” things like this become _very_ important when you’re developing complicated sites used by hundreds or thousands or even more people on daily basis. That’s when “just a few milliseconds” really start making difference 🙂

By: Stoimen

Stoimen — Sun, 20 Jun 2010 19:21:12 +0000

Agree! That’s why I’ve to make some tests with that, perhaps the difference will be more obvious.

By: Rich

Rich — Sun, 20 Jun 2010 19:16:29 +0000

The difference that you saw was probably so small because your DOM was so small and simple.

If you try this with some “real world” html, where the DOM is larger, and the selectors are more complex, you’ll probably see a much greater difference.