jQuery makes it easy to do things. So much so, that developers can become complacent and not strive to make things better and faster. Selecting elements, loops and calendar widgets are all easier for us to build with jQuery, but it is easier to ignore what the browser gives us for efficiencies to help improve client side performance.
This idea started to resonate with me last year with a tweet from @dhh. It pointed out that in the .each() function of jQuery, we as developers were constantly have to reinitialize the jQuery object during each iteration of a loop. Within minutes, someone had derived a new function called .quickEach() which proved to be much more performant. This has been iterated over a few more times as well to generate the fastest possible loop for iterating over the jQuery object. This is not intended to be use for looping over arrays.
After proving that the .each() function was again slower than other options, I wanted to take a look at another useful jQuery function: .css().
The .css() function in jQuery allows you to easily set CSS attributes on elements. The example that I baked up is based on a problem that I am currently working on in which I need to set the left property on a group of about 100 elements as a table scrolls. Initially, I started out using the .css() function as it was the fastest way to prove out what I was trying to accomplish.
As developers we can’t be complacent in learning a framework without learning the underlying language. Doing so leads to less performant results which negatively impacts your users on any device.