JQuery Selector Performance: A Curious Case

Question

I checked the differences between 2 identifiers, the first is normal: $('#lol') And the second is the same, but placed between several brackets: $((((('#lol')))))

I ran the test on jsperf, with firefox and chrome. The results are interesting: With firefox, the first (normal selector) is 40% slower (!!!). With chrome, the second is 0.84% ​​slower.

Why such difference? Can someone explain this?

Is jsperf.com reliable?

Here you can see the test:

http://jsperf.com/ghshshsrd

I will test other browsers for fun.

(Editing: I, by the way, on Mac OS X)

Answer 1

As others noted, the differences between the results obtained for these two statements are not significant. Even when you test the same statement twice , it is very unlikely that you will get two identical Ops / sec values.

Also noticed that you said "test", not "multiple tests." If the result seemed odd, just repeat the test - do not forget that abnormal results can occur if your browser was hungry from part of the resource through a test run.

JSPerf has always been reliable for me - enough to demonstrate optimization methods ( this is a classic example ).

Answer 2

In fact, there is no real difference between the two ways to select an item (other than reading). I created a new jsperf test case that more objectively evaluates the case:

-> http://jsperf.com/jquery-selector-performance-20130730

Why is your test result so strange? Your test case is more likely to be inaccurate than any real performance difference between both tests.

You can go and COMPLETE the test order of your initial test: first check the code $(((('#lol')))) and then $('#lol') . I am absolutely sure that you will get the exact opposite result from your current test; -)

I am not an expert in this, but on the one hand, browsers are very smart today and will cache javascript code / variables. Also jQuery might save the value after the first call.