After searching and digging a lot of artciles about improving jquery performance in web apps, I decided to make a list of best common performance tips and bect practices. We’ll also reveal some of JQuery’s hidden feature and how we can use them for performance tuning.
Lets divide this post into 4 main categoris.
- Selector Performace
- DOM Manipulation
- Digging into JQuery Secrets
- General and All-Time performance tricks
Know your selectors
You should be careful about using jquery selectors because all selectors are nor created equally. With benchmarks, we can see:
1 2 3 4
Optimize selectors for Sizzle’s ‘right to left’ model
Keep it Simple!
Avoid overly complex selectors. Unless you have an incredibly complex HTML document, it’s rare you’ll need any more than two or three qualifiers.
Class selectors and Context
Always try to scope your selectors with id or element.
1 2 3 4 5 6 7
Cache and Chains to Avoid Reselection
Interacting with the DOM as little as possible will drastically speed up your applications.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Wrap everything in a single element when doing any kind of DOM insertion
DOM manipulation is very slow. Try to modify your HTML structure as little as possible.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Leverage Event Delegation
Event listeners cost memory. In complex websites and apps it’s not uncommon to have a lot of event listeners floating around, and thankfully jQuery provides some really easy methods for handling event listeners efficiently through delegation.
When you have a lot of elements in a container and you want to assign an event to all of them – use delegation to handle it. Delegation provides you with the ability to bind only one event to a parent element and then check on what child the event acted (target). It’s very handy when you have a big table with a lot of data and you want to set events to the TDs. Grab the table, set the delegation event for all the TDs:
1 2 3 4 5
Digging into JQuery Secrets
The following snippet is enough what I mean:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Writing own selectors
If you have selectors that you use often in your script – extend jQuery object $.expr[‘:’] and write your own selector. In the following example We create a selector above_the_fold that returns a set of elements that are not visible:
1 2 3 4 5 6 7
The CSS hooks API was introduced to give developers the ability to get and set particular CSS values. Using it, you can hide browser specific implementations and expose a unified interface for accessing particular properties.
1 2 3 4 5 6 7 8 9 10 11 12
What is even better, is that people have already built a rich library of supported CSS hooks that you can use for free in your next project.
General And All time tricks
You may wonder how jquery performance and HTML5 are related but the new HTML 5 standard comes with new tags and a lighter DOM structure in mind. Lighter DOM structure and different tags diferent purpose for means less elements to traverse for jQuery.
DOM isn’t your database
Traversing DOM to retrieve information stored in .text(), .html() is not optimal approach. Use html5 data to attach any kind of information in DOM. With the recent updates to the jQuery data() method, HTML5 data attributes are pulled automatically and are available as entries.
Append style tag when styling 15 or more elements
When styling a few elements it is best to simply use jQuery’s css() method, however when styling 15 or more elements it is more efficient to append a style tag to the DOM instead of applying css to each items.
Always use the latest version
JQuery is always in constant development and improvement. The latest version always contains more bug fixes and performance improvements so it is always wise to keep upto date with the latest versions.
1 2 3 4 5 6 7
Load the framework from Google Code
I urge everyone to use the Google AJAX Libraries content delivery network to serve jQuery to users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching.