1

Always Descend From an #id

The fastest selector in jQuery is the ID selector ($(‘#someid’)). This is because it maps directly to a native JavaScript method, getElementById().

2

Selecting Multiple Elements

The second fastest selector in jQuery is the Tag selector ($(‘head’)). Again, this is because it maps to a native JavaScript method, getElementsByTagName()

3

Cache jQuery Objects

Get in the habit of saving your jQuery objects to a variable. first save the object to a local variable, and continue your operations. Since we want to remember that our local variable is a jQuery wrapped set, we are using $ as a prefix. Remember, never repeat a jQuery selection operation more than once in your application.

4

Leverage Event Delegation (a.k.a. Bubbling)

Unless told otherwise, every event (e.g. click, mouseover, etc.) in JavaScript “bubbles” up the DOM tree to parent elements. This is incredibly useful when we want many elements (nodes) to call the same function. Instead of binding an event listener function to many nodes—very inefficient—you can bind it once to their parent, and have it figure out which node triggered the event. For example, say we are developing a large form with many inputs, and want to toggle a class name when selected.

5

Use Sub-queries

jQuery allows us to run additional selector operations on a wrapped set. This reduces performance overhead on subsequent selections since we already grabbed and stored the parent object in a local variable.

6

Limit Direct DOM Manipulation

The basic idea here is to create exactly what you need in memory, and then update the DOM. This is not a jQuery best practice, but a must for efficient JavaScript. Direct DOM manipulation is slow.

7

Eliminate Query Waste

Although jQuery fails nicely if it does not find any matching elements, it still takes time to look for them. If you have one global JavaScript for your entire site, it may be tempting to throw every one of your jQuery functions into $(document).ready(function(){ // all my glorious code }). Don’t you dare. Only run functions that are applicable to the page. The most efficient way to do this is to use inline initialization functions so your template has full control over when and where JavaScript executes.

8

Defer to $(window).load

There is a temptation among jQuery developers to hook everything into the $(document).ready pseudo event. After all, it is used in most examples you will find. Although $(document).ready is incredibly useful, it occurs during page render while objects are still downloading. If you notice your page stalling while loading, all those $(document).ready functions could be the reason why. You can reduce CPU utilization during the page load by binding your jQuery functions to the $(window).load event, which occurs after all objects called by the HTML have downloaded.

9

Identify weight of the page

We know that the more content on the page, browser takes more time to render the content. We can get the count of DOM elements to identify the same.

The website runs much faster with the less DOM elements; JQuery have a simple code to identify DOM element count.

So If needed then you can optimize it by removing redundant and unnecessary wrapped elements to gain the page performance.

10

Keep your code DRY (Don’t Repeat Yourself)

If you are repeating the code for the similar kind of functionality, you’re doing something wrong and it’ll impact to the performance at the end.