Because jQuery is open source, there are actually a bunch of different versions of it floating around out there that have been manipulated to work for a specific kind of project. Usually this is done by a big company, such as Google, that wants a specific Content Delivery Network (CDN). If you’re working on a similar kind of project, a version of jQuery geared toward that type of project will probably load faster and perform better.
Don’t modify the DOM into a loop
This is really kind of a common sense topic. It’s always best to stay up to date with the latest updates to jQuery. Each version update includes performance updates and advancements and bug fixes that can and will improve the speed and efficiency of jQuery.
Prioritize content above the fold
It’s easy to lose sight of how minor things can have an effect on performance, especially in a big project. Part of upholding best practices is to prioritize correctly, which doesn’t make a big difference for an individual line of code or element, but can make a big difference in the long run over a big project.
Use ID as the selector
Browsers natively support the getElementByID method on their own. This means that assigning jQuery resources by their ID is a faster way of selecting them than by using another method, such as assigning things by Class, which takes more time because the selector has to traverse the DOM before completing the command.
Use the promises interface
Cache objects before using them
Caching objects is really important, especially if you’re using them more than once. When an element is cached, it’s easily accessible by the command structure, and you won’t need to worry about it being called slowly. Once it’s cached, the DOM knows exactly where to look for that element, and it’ll speed up the process as a result.
Only use ready events when needed
Make sure to use the ready function sparingly. Overusing it can really eat through a lot of processing speed because it’ll keep objects readied and using memory space while waiting to fire. A better way to structure these commands is for it ready once the DOM is loaded, which will cut down on processor use.
Use tags before classes
If you’re referencing the selector many times in a row, there’s a better method of doing that. Using a chaining command can aggregate similar commands into a single line, which is much more elegant and a whole lot cleaner in your codebase. It also speeds up the command because each line would have to traverse the DOM individually, rather than all at once.
Give selectors a context
This goes along with what we’ve been talking about with using ID and tags over class. All of these methods, however, traverse the DOM. Something you can do is to use your selectors in such a way that they avoid the DOM and instead focus on a specific region that you know they need to access.
Data storage considerations
To go along with our discussion of the DOM, avoid storing data in the DOM itself. Storing the information in jQuery is usually a preferable option because it lets you associate the data you need with the element it relates to, which speeds up processes drawing from either of them.
Lazy loading is a feature included with jQuery. It lets you specify what content to load at a given time in a given process. This saves a lot of time and energy, for obvious reasons. Make sure to include the jquery.lazyload.js file in your project if you want to use it.
Use group queries
Along with chaining, which we talked about a little earlier, you can use group queries to compress code that would normally be in multiple lines down to one. It saves space, it saves time, and it results in nice, clean code.
The final piece of advice we’ll talk about here is to preload images. This can really speed up loading times because, instead of downloading an image as it’s selected, the image is already loaded up and ready to be viewed before the access command is given. Obviously, it’s not something you want to overuse, but it’s definitely quicker than re-downloading an image every single time.
Hopefully, these tips have given you a better idea about some of the finer points of using jQuery.
best not to leave it to chance!