Improve performances with jQuery best practices

Nowadays we include jQuery almost by default in most of our DDH projects. It offers so much to both designers and developers that it would be very difficult to complete a project without it.

As with most libraries, jQuery includes an incredibly large collection of elements and behaviours, more than we will ever use in one single development.

  • The good bits: it’s ready to use, highly customisable and, most more often than not, cross browser compatible.
  • The bad bit: might not be as performant as a custom built JS library.

Performance is key to a successful website, even more so when dealing with a large amount of data.

Although we might not want to go down the route of custom built JS libraries (time consuming), we can adopt some good practices to keep performances at their best while enjoying every bit of this jQuery magic.

This document covers some of the common standards worth looking at: jQuery Coding Standards & Best Practices.

One thought on “Improve performances with jQuery best practices

  1. Another main advantage of jQuery is how concise the JS code becomes. Pre-jQuery DOM manipulations was really a pain to write, read and debug!

    This list of best practices is pretty good. I would emphasise the importance of chaining the calls and using intermediate variables.

    Only one thing I don’t really like seeing is HTML embedded in the JS code. Sometimes it has to be done but I’d recommend keeping that to a minimum. JS is for behaviour, HTML is for document structure and it’s also a best practice to preserve the separation of concerns. It’s also better for SEO. Having large block of HTML embedded in JS can be avoided by loading that block in a hidden div as part of the initial web page load and then grabbing it and tweaking it with jQuery.

    As for tweaking the appearance of the page, it is also better to do it by toggling on and off classes on the elements whenever it’s possible rather than making direct style or structure changes with jQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *