CTS – Your Technology Partner

Six Tips Toward More Efficient jQuery Coding

Written by Brent Wiseman on March 10, 2014

 

Since its release in 2006, jQuery has quickly risen to the throne of JavaScript frameworks. It’s (relatively) easy for JavaScript programmers to learn; it’s extensible through an almost incredible array of freely available plugins; and on top of all that, it’s blinding fast, and performance is not generally an issue.

That said, I thought I’d take time to highlight some of the most commonly overlooked small things that can be done to improve jQuery’s performance. This is not a high-level list, but at the same time most of these are things that rookie programmers commonly overlook, forget about, or in some cases don’t even know about.

1. Make use of method chaining.

$(“.myClass”).show();

$(“.myClass”).css(“margin-right”, “5px”);

Operations done in succession on the same jQuery selector can almost always be chained together into a single statement. Doing so saves jQuery from having to search the DOM for the same element or group of elements twice:

$(“.myClass”).show().css(“margin-right”, “5px”);

2. Cache frequently used elements.

Caching is a technique for saving the results of a jQuery selector in a declared variable, so that the results are already in memory when you need to access them again. It’s another handy technique to save jQuery from having to search the DOM all over again:

var $buttonElements = $(“input:button”).hide(); // hide all the button elements

// execute more code here

$buttonElements.show(); // saves jQuery from having to find all the button elements again

3. Let CSS do the work when possible.

As big a fan as I am of jQuery, there are times when you can use simple CSS or CSS3 to accomplish many of the same tricks available in jQuery. When you can do this, by all means do so! A properly enabled browser applying CSS rules will outperform jQuery every time. Some examples might include:

– changing the visibility or opacity of an element

– performing a transform or transition on an element

– adding a shadow to an element

4. Use HTML5 semantic elements when appropriate.

This might be the easiest way to make a subtle performance improvement. Using the semantic elements like <section>, <header>, <footer>, <aside>, etc. will mean that there are less items that share a given tag name, which generally pays dividends in better selector performance.

5. Test for the existence of objects, whether jQuery throws an error or not.

jQuery is designed so that if your selector doesn’t find any elements, it won’t throw an error. That’s great. However, if you’re immediately going to be doing some operations on that object, you should still check for the existence of the object– otherwise jQuery may execute a number of useless functions before determining that the object doesn’t exist. A quick test for the existence of the object before proceeding can save processing cycles.

if (!myObject) {}

else {

// myObject exists, operate on it

}

6. Don’t reinvent the wheel.

Few of us ever take the time to review all of the methods available with jQuery, not to mention the plug-ins available with jQuery and jQueryUI… there are just too darn many of them. But at some point early in your jQuery experience, you really should take a tour and become familiar with all the tools in your tool bag. Chances are, there is a method or plug-in out there somewhere to accomplish your task, and that knowledge could save you a ton of time!

Comments

comments