Cached vs chained selectors in jquery?

Question

I am wondering if there is a performance difference between using a cached selector, and using chained selectors?

If I understand it correctly the chaining works because each function returns the jquery object, which is exactly the same as what is contained in the cached selector. So there would be no difference performance wise in the two examples below is there?

Cached Selector

$(function(){

    $.on('click', '.disabled', function(){
        $toggle = $(this);
        $toggle.attr('title', 'Object Enabled');
        $toggle.toggleClass('disabled enabled');
        $toggle.html('Enabled');
    });
});

Chained Selector

$(function(){

    $.on('click', '.disabled', function(){
        $(this)
            .attr('title', 'Object Enabled')
            .toggleClass('disabled enabled')
            .html('Enabled');
    });
});

http://www.jsperf.com - try it out yourself - or just look at other peoples results: http://stackoverflow.com/questions/10433014/what-is-the-cost-of-this — ahren, Oct 17 '12 at 03:04
@gdoron - yeeeep, I noticed you linked to it in an answer to another question yesterday and had a read - it's a good post =) — ahren, Oct 17 '12 at 03:40
@ahren. Thanks, if you want another resource, there is an issue which being asked many many times: [this question](http://stackoverflow.com/a/12926749/601179) and it's linked answer. I'm not active for a while in SO, so I can't keep on saying it... you can use it. — gdoron, Oct 17 '12 at 03:45

Ohgodwhy · Accepted Answer · 2012-10-17T03:12:01.293

6

You can see here

http://jsperf.com/jquery-chaining

That the difference is negligible.

Chained

$('#theDiv').addClass('test').removeClass('test');

59,874 Operations / Second

Separate calls (cached)

var d = $('#theDiv');
d.addClass('test');
d.removeClass('test');

62,021 Operations / Second

edited Oct 17 '12 at 03:12

answered Oct 17 '12 at 03:05

Ohgodwhy

49,779
11
80
110

It depends on the browser... It's not correct to say that one is better-faster than the other. I did those kind of tests once... – gdoron Oct 17 '12 at 03:07
oh my god why `:)` howz it! yes jsperf is good indeed `:)` +1 anyways man! – Tats_innit Oct 17 '12 at 03:07
Apparently some older versions of FF and Chrome have slightly faster chained performance, but overall the cached one is slightly faster. I still don't get it though, the jQuery method always return the jQuery object itself (with chaining or not), I'd only guess that accessing another point in the memory would take more time than just chaining methods on the return value. – Fabrício Matté Oct 17 '12 at 03:11
@FabrícioMatté. It's called **Sampling error**. Those tests show you there is absolutely no difference between the two! – gdoron Oct 17 '12 at 03:15
@FabrícioMatté. BTW, you can check my (old) jsperf on it [here](http://jsperf.com/this-cost). you can see that it FF, all the ways are equals. – gdoron Oct 17 '12 at 13:18

gdoron · Answer 2 · 2012-10-17T03:10:23.553

5

It will have minimal if any difference, and it depends on the executing browser.

"We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil"

edited Oct 17 '12 at 03:10

answered Oct 17 '12 at 03:04

gdoron

147,333
58
291
367

Agreed actually, I was only asking as I was curious, regardless of the answer I have my coding styling :) – Hailwood Oct 17 '12 at 06:15
@Hailwood. You can [check this jsperf](http://jsperf.com/this-cost), You can see the difference is very small and vary from browser to browser. – gdoron Oct 17 '12 at 13:16

score 0 · Answer 3 · answered Oct 17 '12 at 03:09

0

It don't think there is a lot of difference in performance between the two..

Check this

jsperf Performance

answered Oct 17 '12 at 03:09

Sushanth --

55,259
9
66
105

Cached vs chained selectors in jquery?

3 Answers3