On: JQuery implicit loops

[duopixel]

These two pieces of code should have around the same performance:

    $( ".widget" ).css( "color", "green" ).css( "font-size", "16px" );

    $( ".widget" ).css({ 
      "color": "green",
      "font-size": "16px"
    })

Fact is, jQuery also has to loop through the object and assign each css style declaration, so the performance is very similar.

http://jsperf.com/chained-css-declarations-jquery

[HyprMusic → duopixel]

In all my days of bitching about people chaining like this, never once did it occur to me they have the same big O notation performance.

I still prefer the latter style though, in my opinion it's far easier to read.

[pessimism → HyprMusic]

I’ve always questioned the sanity of the people who do something similar to the former example in d3.js; this is so much easier: http://pygm.us/IhBQwUAI.

[eamann → duopixel]

In most other languages, the second form makes more sense. But jQuery is doing things under the surface that make the syntax change inconsequential.

In my performance tests (Win 8, Chrome 25), the chained method actually performed faster than the object method. So while the idea of passing multiple arguments to a single function call (as opposed to making multiple function calls) might make sense for a general programming best practice, when applied to jQuery it fails.

[elijahmanor → duopixel]

Nice point about the object loop. I would image though that the object would have relatively few properties whereas the number of DOM elements in the jQuery collection could vary dramatically based on the UI (think a long list of list items).

[Osmose → elijahmanor]

That doesn't matter, though. Let's take the example above and say there's 5000 .widget items on the page. There's two properties that need to be set. Assuming jQuery works as you expect, in the first case we iterate over 5000 elements setting one attribute, then do it again, for 10000 total operations. In the second case, it iterates over 5000 elements once, but sets two attributes, which is again 10000 total operations.

But this is all speculation anyway. Why not read the code? A bit of searching turns up the css function: https://github.com/jquery/jquery/blob/master/src/css.js#L102 . Interestingly, it passes a callback to something called jQuery.access.

More searching finds access here: https://github.com/jquery/jquery/blob/master/src/core.js#L71... . Note line 719: If the key (which is the first argument to css) is an object, it just iterates through the object and recursively calls itself for each key-value pair in the object.

Thus, passing an object to css is equivalent to calling css multiple times, ignoring small costs of re-building the callback function that css passes to access (and I'm not even sure that cost exists, I'd actually expect any decent interpreter to optimize such that re-building it is of negligible performance cost).

The jQuery source code is a rather fun read, I highly recommend stepping through it from time to time. :)