CODEWITHSUNDEEP
javascriptjqueryperformance
Matt Altepeter
Matt Altepeter

Reputation: 956

JavaScript .length performance

I have a pretty mundane task, but I got to wondering how the performance of these two methods vary. I'm trying to get the total number of checked checkboxes and display that to the user:

$(document).on('change', ':checkbox', function() {
    if ( $(this).is(':checked') )
        count++;
    else
        count--;

    $count.html(count);
 });

versus

 $(document).on('change', ':checkbox', function() {
    $count.html($(':checkbox:checked').length);
 });

Thanks!

Upvotes: 0

Views: 444

Answers (3)

Samuel Santos Dev
Samuel Santos Dev

Reputation: 1

For jQuery .on, .live or .delegate methods, check changes in $(myMainElement) and find the element expected for you.

$(myElementChanged).on('change', Find, function{})

$(document) is all your DOM and the jQuery checks all elements for Find every time.

Change this to div or the element if receiving the Find.

Example:

$(document).on

to

$('div#myForm').on

and restrict the area for checking.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707238

As with all performance questions, if you really, really thought the performance difference might be relevant in your application (which seems unlikely since it's just responding to a user event), then you would have to measure, measure, measure to see which was actually faster.

In general, running a few extra lines of Javascript code is way faster than searching the entire DOM to find things so a guess based on that logic would be that $(':checkbox:checked') would be slower than if ( $(this).is(':checked') ). But .is() isn't a particularly fast operation either.

So, here's a test case built in jsperf: http://jsperf.com/checkbox-count that I put a fair amount of HTML into the test page. Your mileage might vary if you had a smaller DOM to search.

The if ($(this).is(':checked')) option is more than 500 times faster in all modern browsers. Here's the graphic comparison. The $(':checkbox:checked').length is so much slower that the blue bar does not even show in the graph.

enter image description here

Here are the actual numbers for "Operations per Second" in each browser:

Chrome .is(...): 934,632
Chrome $(...).length: 498

IE 11 .is(...): 209,333
IE 11 $(...).length 268

Firefox .is(...): 1,227,712
Firefox $(...).length: 251

As you can see, this is a pretty stunning difference. DOM searching is slow. But, it probably still wouldn't make any actual difference in the code example you showed because this is just a few milliseconds difference in response to a user event. The slowest operation up there is still less than 5ms so that is probably not something that could be noticed in a simple event handler.

But, if this was part of something that was being evaluated in a loop over and over as part of a longer calculation, then it could make a big difference in a case like that.

Upvotes: 2

Drown
Drown

Reputation: 5982

how the performance of these two methods vary

It won't. The performance gain of using one versus the other is negligible, there's no way it would be noticed and there are many things that you should optimize instead of doing those micro-optimizations.

I would advise going for the more readable length, it's only one line of code and it's easy to read and understand. You won't gain or lose any performance in execution time, but you might gain some performance from your coworkers if your code is easier to read and understand. ;)

Upvotes: 1

Related Questions