Advertisement
JavaScript & AJAX

10 Ways to Instantly Increase Your jQuery Performance

by

This article will present ten easy steps that will instantly improve your script's performance. Don't worry; there isn't anything too difficult here. Everyone can apply these methods! When you're finished reading, please let us know your speed tips.

1. Always Use the Latest Version

jQuery is in constant development and improvement. John and his team are always researching new ways to improve program performances.
As a sidenote, just a few months ago, he released Sizzle, a selector library that's said to improve program performances up to 3 times in Firefox.

If you want to stay up to date without having to download the library a thousand times, GIYF (Google Is Your Friend), in this situation too. Google provides a lot of Ajax libraries from which to choose.

	<!-- get the API with a simple script tag -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		/* and load minified jQuery v1.3.2 this way */
		google.load ("jquery", "1.3.2", {uncompressed: false});
		
		/* this is to display a message box
		   when the page is loaded */
		function onLoad () {
			alert ("jQuery + Google API!");
		}
		
		google.setOnLoadCallback (onLoad);
	</script>

* Editor's Note: Perhaps, the quicker and easier method is to simply link to the script directly. Rather than hard-coding the specific version of jQuery directly (1.3.2), you should instead use 1, which will automatically reference the most recent version of the library.

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

2. Combine and Minify Your Scripts

Minify

The majority of browsers are not able to process more than one script concurrently so they queue them up -- and load times increase.
Assuming the scripts are to be loaded on every page of your website, you should consider putting them all into a single file and use a compression tool (such as Dean Edwards') to minify them. Smaller file sizes equal faster load times.

The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). -- From YUI compressor, an excellent tool jQuery officially reccomends to minify scripts.

3. 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.

Using Firebug, it's possible to measure the time each of the two functions takes to run.

	var array = new Array ();
	for (var i=0; i<10000; i++) {
		array[i] = 0;
	}
	
	console.time('native');
	var l = array.length;
	for (var i=0;i<l; i++) {
		array[i] = i;
	}
	console.timeEnd('native');
	
	console.time('jquery');
	$.each (array, function (i) {
		array[i] = i;
	});
	console.timeEnd('jquery');

The above results are 2ms for native code, and 26ms for jQuery's "each" method. Provided I tested it on my local machine and they're not actually doing anything (just a mere array filling operation), jQuery's each function takes over 10 times as long as JS native "for" loop. This will certainly increase when dealing with more complicated stuff, like setting CSS attributes or other DOM manipulation operations.

4. Use IDs Instead of Classes

It's much better to select objects by ID because of the library's behavior: jQuery uses the browser's native method, getElementByID(), to retrieve the object, resulting in a very fast query.

So, instead of using the very handy class selection technique, it's worth using a more complex selector (which jQuery certainly doesn't fail to provide), write your own selector (yes, this is possible, if you don't find what you need), or specify a container for the element you need to select.

	// Example creating a list and filling it with items
	//  and selecting each item once
	
	console.time('class');
	var list = $('#list');
	var items = '<ul>';
	
	for (i=0; i<1000; i++) {
		items += '<li class="item' + i + '">item</li>';
	}
	
	items += '</ul>';
	list.html (items);
	
	for (i=0; i<1000; i++) {
		var s = $('.item' + i);
	}
	console.timeEnd('class');

	console.time('id');
	var list = $('#list');
	var items = '<ul>';
	
	for (i=0; i<1000; i++) {
		items += '<li id="item' + i + '">item</li>';
	}
	
	items += '</ul>';
	list.html (items);
	
	for (i=0; i<1000; i++) {
		var s = $('#item' + i);
	}
	console.timeEnd('id');

The above code really shows the differences between the two ways of selecting elements, highlighting a never-ending over 5 seconds time to load the class driven snippet.

5. Give your Selectors a Context

As stated in jQuery's documentation,

The DOM node context originally passed to jQuery() (if none was passed then context will be equal to the document).
It should be used in conjunction with the selector to determine the exact query used.

So, if you must use classes to target your elements, at least prevent jQuery from traversing the whole DOM using selectors appropriately.

Instead of

	$('.class').css ('color' '#123456');

always go for contextualized selectors in the form:

	$(expression, context)

thus yielding

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

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

6. Cache. ALWAYS.

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.

Never select elements multiple times inside a loop EVER! It'd be a speed-killer!

	$('#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');
	
	
	// as for loops, this is a big no-no
	console.time('no cache');
	for (var i=0; i<1000; i++) {
		$('#list').append (i);
	}
	console.timeEnd('no cache');
	
	// much better this way
	console.time('cache');
	var item = $('#list');
	
	for (var i=0; i<1000; i++) {
		item.append (i);
	}
	console.timeEnd('cache');

And, as the following chart exemplifies, the results of caching are evident even in relatively short iterations.

7. Avoid DOM Manipulation

DOM manipulation should be as limited as possible, since insert operations like prepend(), append(), after() are rather time-consuming.

The above example could be quickened using html() and building the list beforehand.

	var list = '';
	
	for (var i=0; i<1000; i++) {
		list += '<li>'+i+'</li>';
	}
	
	('#list').html (list);

8. No String concat(); Use join() for Longer Strings

It might appear strange, but this really helps to speed things, especially when dealing with long strings of text that need to be concatenated.

First 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.

	var array = [];
	for (var i=0; i<=10000; i++) {
	    array[i] = '<li>'+i+'</li>';
	}

	$('#list').html (array.join (''));

However, recent tests conducted by Tom Trenka contributed to the creation of the following chart.

"The += operator is faster—even more than pushing string fragments into an array and joining them at the last minute" and "An array as a string buffer is more efficient on all browsers, with the exception of Firefox 2.0.0.14/Windows, than using String.prototype.concat.apply." -- Tom Trenka

9. Return False

You may have noticed whenever your functions don't return false, you jump to the top of the page.
When dealing with longer pages, this result can be quite annoying.

So, instead of

	$('#item').click (function () {
		// stuff here
	});

take the time to write

	$('#item').click (function () {
		// stuff here
		return false;
	});

10. Bonus tip - Cheat-sheets and Library References

This isn't a speed up tip, but could end up, in a round about way, being one if you take the time to find your way through cheatsheets and function references.
Save yourself some time and keep a cheat-sheet within an arm's reach.


Related Posts
  • Web Design
    HTML & CSS
    Build a Dynamic Grid with Salvattore and Bootstrap in 10 MinutesSalvatorre thumb
    Today, we will use Salvattore in combination with Twitter Bootstrap 3 to make a responsively awesome flowing grid structure.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    HTML & CSS
    Intro to Shadow DOMShadow dom retina preview
    Take any modern web page and you will notice that it invariably contains content stitched together from a variety of different sources; it may include the social sharing widgets from Twitter or Facebook or a Youtube video playing widget, it may serve a personalized advertisement from some ad-server or it may include some utility scripts or styles from a third party library hosted over CDN and so on. And if everything is HTML based (as is preferred these days) there is a high probability of collisions between the markup, scripts or styles served from various sources. Generally, namespaces are employed to prevent these collisions which solve the problem to some extent, but they don't offer Encapsulation.Read More…
  • Code
    Tools & Tips
    Tips to Avoid Brittle UI TestsUi test retina preview
    In the last article I talked about a few ideas and patterns, like the Page Object pattern, that help write maintainable UI tests. In this article we are going to discuss a few advanced topics that could help you write more robust tests, and troubleshoot them when they fail:Read More…
  • Code
    Articles
    Web Assets - Tips for Better Organization and PerformanceWeb assets retina preview
    Remember back to when we had to spend a lot of time optimizing our project's assets (images, CSS, etc..)? Well today, users have a much faster Internet connection and it appears that we can afford to use bigger images or bigger flash files with a lot of video and pictures inside. However, with the rise of mobile development, we are again back in that same situation. It is extremely important to create well optimized sites, so that we have faster applications, which download less content and respond immediately. Read More…
  • Code
    JavaScript & AJAX
    jQuery Succinctly: jQuery SelectingJquery cover
    Custom jQuery Filters Can Select Elements When Used Alone It is not necessary to provide an actual element in conjunction with a filter, such as $('div:hidden'). It is possible to simply pass the filter alone, anywhere a selector expression is expected.Read More…