Which has more effective performance?

Question

$("#search-by-id-wrapper, #searchforit, #findbyid, #search-block-form .container-inline").toggle();

or

$("#search-by-id-wrapper").toggle();
$("#searchforit").toggle();
$("#findbyid").toggle();
$("#search-block-form .container-inline").toggle();

only two ways to answer this - theoretically, or by benchmark. #1 is useless, and you should do #2 yourself! — Alnitak, Apr 21 '11 at 09:39
It will most likely not matter, because the selectors will be resolved the same way. — Pekka, Apr 21 '11 at 09:40
Benchmark and let us know ;) http://stackoverflow.com/questions/1003855/howto-benchmark-javascript-code — kovshenin, Apr 21 '11 at 09:41
This specific case is such a trivial example that I'd always go with the first method for **conciseness**. The performance difference is absolutely negligible. — deceze, Apr 21 '11 at 09:48

score 1 · Accepted Answer · answered Apr 21 '11 at 10:13

With a cursory look at Sizzle, jQuery's selector library, it chunks the selector string using commas anyway...

My intuition thus says it will be faster to use the first form, and even better so if you cache the selected jQuery object.

var $searchThings = null;
/* ..... */
function toggleSearchThings() {
     $searchThings = $searchThings || $("#search-by-id-wrapper, #searchforit, #findbyid, #search-block-form .container-inline");
     $searchThings.toggle();
}

score 0 · Answer 2 · answered Apr 21 '11 at 09:48

Even if there is a slight performance difference which I doubt since the string is most likely split and multiple getElementById calls are used in both cases (however, the latter case creates 4 instead of 1 jQuery wrapper objects) it's most likely neglectible.

So you should use the latter since it's much more readable.

Which has more effective performance?

2 Answers2