jQuery is so easy to use that we sometime ignored its smart uses which may affect performance. Really it’s very fast library and no need to optimize it. But when it comes to the real world, jQuery can make developers crazy with performance issues. You can lose precious milliseconds without even knowing it. Also it’s common to use some old deprecated function instead of effective new functions which can make things easier and lighter.

Let’s take a look at few smart Tips and Tricks to increase performance while using jQuery in your projects.

jQuery Tips and Tricks to Increase Performance

1. Always Use the Latest jQuery Version

Always try to use latest jQuery version because each version update means higher performance and several bug fixes. The current jQuery stable version is 2.0.3, I know you have developed many sites below this version and it’s not easy to update every old site for every jQuery version updates but you should always start using it for each new projects. So always try to grab the latest release every time you start a new project.

2. Always load CDN-hosted copy of jQuery

There are many big companies(Google, Microsoft and jQuery themselves) offer copies of jQuery hosted on their CDN’s (Content Delivery Network) which saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script. It’s better to use Google’s or other CDN’s copy of jQuery instead of yours. So perhaps the best solution is to use both methods! Use the CDN first, and if it fails, load the local copy. Here is a technique:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script >
<script >
if (!window.jQuery) {
    document.write('<script src="/path/to/your/jquery"></script >');
}
</script >

3. Always use ID as Selector Instead of Classes or Name

Always use ID as selector in jQuery. See below jQuery code.

$("#myDivId");

Selecting elements using IDs is fast because the browsers have the native getElementByID method that jQuery will use for IDs. When Classes are used as selector then jQuery has to do DOM traversal. So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.

4. Alaways Cache jQuery Objects before use

Cache jQuery Objects is one of the most important performance tips. If you’ll call an element at least twice, you should cache it. Caching is just saving the jQuery selector in a variable, so when you need to call it again you’ll just reference the variable and jQuery won’t need to search the whole DOM tree again to find your element.

var myDiv = $('#myDivId'); 
myDiv.hide(); 
myDiv.show();

5. Alaways use Tags Before Classes

Always try to use tags before classes when selecting through tags because jQuery uses the native browser JavaScript method getElementsByTagName(). You can select through ID which is faster but this is still much faster than selecting with a class name.

<ul id="list"> 
<li> <input class="items" name="item" type="radio" value="xyz" /> xyz </li>
</ul>

It is better to prefix a class with a tag name and then it is better to descend from an ID to limit the scope of the selection:

var item = $('#list input.items');

6. Use Chaining

Never use your selector repeatedly. See below jQuery code. The selectors are used thrice for 3 different operations.

$("#myID").css("color", "blue");
$("#myID").css("font", "Arial");
$("#myID").text("Hello!");

The problem with above code is, jQuery has to traverse DOM 3 times as there are 3 different statements. But this can be combined into a single statement.

$("#myID").css({ "color": "blue", "font": "Arial"}).text("Hello!");

7. Just give your Selectors a Context

If you use classes to target your elements, it will traverse entire DOM. So try to prevent jQuery from traversing the whole DOM using selectors smartly.

Instead of:

$('.class').css ('color' 'red');

Use this:

$('.class', '#class-container').css ('color', 'red');

runs much faster, because it doesn’t have to traverse the entire DOM, just check for #class-container element.

8. Storing Data

Always use data method and avoid storing data inside the DOM. For example, this is bad:

$('#selector').attr('alt', 'your description.....');

Actually HTML attributes is not meant to store data like that and the “alt” as a parameter name does not really make sense. The right alternative in most cases is using the data method in jQuery. It allows you to associate data with an element on the page.

$('#selector').data('alt', 'your description.....');

9. Preloading images

Always try to impliment preloading of images because preloading images in a web page improves performance. It’s useful when an animation is in progress on your web page does not need wait for the images to be loaded.

10. Try to make code simpler using group queries

Always try to make code simpler by group statement. For example, don’t do code like below which takes unnecessary space and takes time to write. You just simply use group queries in the selector if you have to apply same operation with all of them.

Instead of:

 $('div.close').click(doSomething);
 $('button.close').click(doSomething); 
 $('input.close').click(doSomething);

Use this:

 
$('div.close, button.close, input.close') .click(doSomething);

11. jQuery Lazy Loading

It’s a great feature in jQuery that enables you to load only the content that is needed. It’s also very useful to improve performance. To implement it, you should use the jquery.lazyload.js script file in your project.

12. Always Return False

We often noticed that whenever our functions don’t return false, it jump to the top of the page. So this will be avoided by returning false because this can be bad effect with longer pages.

13. Use join() for Longer Strings

Don’t use concat() function to concate longer strings. Always create an array and fill it with what you have to join together. The join() method will prove much faster than the string concat() function.

14. Try to avoid DOM Manipulation

Always try to limit DOM manipulation as it is very time consuming. The function html() should be use rather than prepend(), append(), after() which are very time consuming.

15. Check if an Element Exists

Always check for DOM element existence before doing something. By checking it, you will avoid errors and save time.

if ($("#someElement").length)
{ 
	//The DOM element exists
}

 

Do you have anything you think should be on this list? Just share your thoughts!

email

Related Post

2 Responses to 15 jQuery Tips and Tricks to Increase Performance

Leave a Reply

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

Web Design Quote | Web Design Estimate
Logo Design Quote
SEMrush
Categories

Related Post

Archives
February 2017
S M T W T F S
« May    
 1234
567891011
12131415161718
19202122232425
262728