Six jQuery Best Practices for Improved Performance

jQuery is one of the most popular JavaScript libraries today. Its API is very easy to use leading to a not so steep learning curve. A lot of projects use jQuery code instead of directly using the vanilla JavaScript to bring in dynamic functionalities.

But jQuery has its shortcomings too. It can lead to some performance issues if used carelessly just like the language it’s based on. This post will list some of the best practices in using jQuery that will help us avoid any performance issues.

1. Lazy load scripts when needed

Browsers run JavaScript before creating the DOM tree and painting the pixels on the screen, because scripts can add new elements to the page or change the layout or style of some DOM nodes. So, by giving the browser less scripts to execute during page load, we can reduce the time it takes for the final DOM tree creation and painting, after which the user will be able to see the page.

One way to do this in jQuery is by using $.getScript to load any script file at the time of its need rather than during page load.

$.getScript( "scripts/gallery.js", callback);

It’s an ajax function that will get a single script file when you want it, but note that the file fetched isn’t cached. To enable caching for getScript you’ll have to enable the same for all of the ajax requests. You can do so by using the code below:

$.ajaxSetup({
 cache: true
});

2. Avoid $( window ).load() if your script doesn’t need any sub-resources of the page

The $( document ).ready() is equivalent to DOMContentLoaded (where DOMContentLoaded is available) and $( window ).load() to Load. The first one is fired when a page’s own DOM is loaded, but not external assets like images and stylesheets. The second one is fired when everything a page is made up of, including its own content and its sub-resources are loaded.

So, if you’re writing a script that relies on a page’s sub-resources, like changing the background color of a div that’s styled by an external stylesheet, it’s best to use $( window ).load().

But, if that’s not the case, it’s better to stick to $( document ).ready() because, jQuery calls its ready event handler whether you use $( document ).ready() or not, so use it when you can.

3. Use detach to remove elements from DOM that needed to be changed.

“Reflow” is a term that refers to layout changes in a webpage, it’s when the browser rearranges a page’s elements to accommodate a new element, adjust to structural changes of an element, fill the gap left by an element removed , or some other action that needs a layout change in the page. reflow is an expensive browser process.

We can reduce the no. of reflows caused by structural changes to an element by performing the changes on it after taking it out of the page flow and putting it back when it’s done. If you’re adding multiple rows to a table one by one it’ll cause a lot of reflows. So it’s better to take the table out the DOM tree, add the rows to it and put it back to the DOM; this will reduce reflows.

jQuery’s detach() lets us remove an element from the page, it’s different from remove() because it’ll save the data associated with the element for when it needs to be added to the page later. A detached element can then be put back into the page when it has been modified.

4. Use css() to set height or width instead of height() and width()

If you’re setting the height or width of an element in jQuery, I suggest you use the css() function because setting those values using height() and width() will cause extra reflows due to the accessing of some layout properties in the function computeStyleTests in jQuery (tested in the latest ver.).

For the code p.height("300px"); here are the reflows.

reflow by height

For p.css({ "height": "300px"});

reflow by css

computeStyleTests is used to do some support tests. It’s also called while getting the height & width using both css() and height()/width() , but for setting it’s only called for height()/width() which may not be needed, so use css() instead.

5. Don’t access layout properties unnecessarily

Accessing layout properties like height, width, margin, etc. will trigger reflow in the page. The reason being whenever you ask the browser for any of the layout properties, it makes sure you get the updated value (in case the value has been invalidated before) by recalculating the values and applying any layout changes.

So whether you’re using jQuery or vanilla JavaScript, beware of accessing layout properties unnecessarily especially in a loop or consequently after making style changes.

6. Make use of caching where you can

Some of jQuery’s functions come with caching mechanisms that can be put to good use. Ajax requests do cache the resources, but it isn’t available for script and jsonp, so if you want caching across all your ajax requests, you may want to set it globally like below.

Also note that if you fetch resources using post it will not be cached even if you enable caching with the above setup.

Like I mentioned before, detach() caches the data associated with the element to be removed unlike remove();hide() caches the initial CSS display value of an element before hiding it so that it can be restored later without losing the data.

Conclusion

One way you can be sure that you’re using the most effective jQuery code for your need is to wait till you’ve actually run your code and noticed if there is any performance issue or not. If there’s, use the performance and debugger tools to detect the root of the issue.

Since jQuery is like a cocoon for JavaScript with additional functionalities for browser compatibilities and features, it can be difficult to diagnose the problems without these tools.

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmail