Some quick tips for instantly increase jQuery performance


1.Use Selectors Effectively

When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element. 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. 1. $(".selected"); $("li.selected"); $("#someList .selected"); $("#someList li.selected"); $("#mainItem"); 2. var someList = $('#someList')[0]; $(".selected", someList); $('#someList').find('.selected');

2. Keep selection operations to a minimum by caching

Do not make the mistake or reusing your selectors time and time again. Instead, you should cache it in a variable. That way, the DOM doesn’t have to track down your element over and over again. 1. $('#item').css ('color', '#123456'); $('#item').html ('hello'); $('#item').css ('background-color', '#ffffff'); // you could use this instead $('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff'); // or even var item = $('#item'); item.css ('color', '#123456'); item.html ('hello'); item.css ('background-color', '#ffffff'); 2. // as for loops, this is a big no-no for (var i=0; i<1000; i++) { $('#list').append (i); } // much better this way var item = $('#list'); for (var i=0; i<1000; i++) { item.append (i); } 3. var elem = $("#mainItem"); elem.hide(); //Some code elem.val("Hello"); //More code elem.html("Oh, hey there!"); //Even more code elem.show();

3. Perform DOM Manipulation more Intelligently

DOM insertion operations like .append() .prepend() .after() and .wrap() are relatively costly and performing lots of them can really slow things down. All we need to do is use string concatenation to build the list and then use a single function to add them to your unordered list. Take the following example… 1. var list = $("#someList"); for (var i=0; i{ list.append('
  • Item #' + i + '
'); } 2. var list = $("#someList"); var items = ""; for (var i=0; iitems += '
  • Item #' + i + '
'; } list.append(items); 3. var list = document.getElementById('someList'); var items = ''; for (var i=0; iitems += '
  • Item #' + i + '
'; } list.innerHTML = items;

4. Detect if an Element Exists

As is often the case, you’ll be serving a single script file containing your code to all the pages in your site. This is usually code which often performs actions on nonexistent elements in the current page. Though jQuery handles problems such as these quite gracefully, this doesn’t mean that you can just ignore any problems. In fact, if you call jQuery’s methods on an empty collection, they won’t be run. As a best practice, only run code which is applicable to the currently loaded page, instead of bunching all of your code into a single document ready check, and serving it to the client. 1. var ele = $("#somethingThatisNotHere"); ele.text("Some text").slideUp(300).addClass("editing"); $("#mainItem"); var ele = $("#somethingThatisNotHere"); if ( ele[0] ) { ele.text("Some text").slideUp(300).addClass("editing"); } $("#mainItem"); 2. if ($("#someDiv").length) { //hooray!!! it exists... } if($(element).is(":visible") == "true") { //The element is Visible }  

5. Use For Instead of Each

Native functions are always faster than any helper counterparts. Whenever you’re looping through an object received as JSON, you’d better rewrite your JSON and make it return an array through which you can loop easier. 1. var array = new Array (); for (var i=0; i<10000; i++) { array[i] = 0; } var l = array.length; for (var i=0;i<l; i++) { array[i] = i; } $.each (array, function (i) { array[i] = i; });
Advertisements