A great part about using a JavaScript library like jQuery is its selectors. But before you use them all over the place, stop to think: what are the processing costs?

Basically, jQuery defines all the elements on a page as a huge JavaScript object, and then interacts with it. You don’t have to look into the source code to realize that the selector function works by iterating all objects that fit a certain criteria. Therefore, it makes sense to give the selection function a helping hand by defining the selection criteria more specifically.

Let’s do a quick case-study:

Pretend you’re doing site navigation and want to select an LI that has the CSS class ‘active.’ One way to select this element is:

$('.active')

This selector works just fine, but think about what the jQuery DOM traversal has to do here: iterating through hundreds of elements on the page, selecting any with the class ‘active.’ That’s a lot of processing for our little nav bar.

It turns out, according to selector speed tests, that a CSS class alone is just about the worst way to select an object, since jQuery must go through literally every element on the page. Instead, narrow it down a bit using the element that the class is attached to:

$('LI.active')

With only a couple LI’s on the page, this selector performs much better—in half the time on my FF3 and Safari.

2. Select top level by id

That last object selection could be further optimized by using an id in addition to the element and class. As explained in this jQuery performance tip, jQuery’s DOM traversal processes id selection fastest, followed by element and class selection. So it is better to select the list element using:

$('#menu LI.active')

Interestingly, here it is less efficient to use $(’UL#menu LI.active’), since adding the UL element at the head of the selector causes jQuery to use the worse selection method. Stick with $(’#menu LI.active’) and remember that the top level node is the most important to select efficiently.

3. Define objects when using selectors

We’ve already established that the selector function is pretty resource heavy, so let’s think of some ways to avoid using it if possible. Mainly, let’s never select the same thing more than once through the jQuery DOM traversal. In our example, we can define an object:

$active = $('#menu LI.active');

Now we are free to use this element as much as we want without worrying about traversal processing.

4. Avoid doing anything you don’t have to¹

It may seem like common sense, but it is important to avoid executing extraneous functions.

Suppose that in parts of a site we want to collapse side navigation elements on page load:

$(document).ready(function() {
    $('#sideNav LI:not(#current)').hide();
});

Even though some pages don’t have the side nav, this won’t throw an error in any browser, but let’s still make sure that the hide function only executes when it’s needed:

$(document).ready(function() {
    var sideNavPages = ['catalog', 'order', 'contact'];

    if ( jQuery.inArray(thisPage, sideNavPages) != -1 ) {
        $('#sideNav LI:not(#current)').hide();
    }
});

I think there is a real tendency with jQuery to execute way more code than is neccessary for a page, since jQuery won’t error the way JavaScript will if you are trying to select an object that does not exist. But we have to be responsible as developers: even if the client can’t see a blatant error warning, you’ll still know you wrote horrible code.

5. Learn the library completely

Some developers who got into jQuery early are missing out on a lot of the functions released with later versions. Sure they use the latest version when they build a new site, but they interface with it in an old way. After reading an old tutorial, I was using:

a.hasClass('b') ? a.removeClass('b') : a.addClass('b');

instead of:

a.toggleClass('b');

Presumably the developers engineering the jQuery library spent more time on optimization than you have on any individual front-end. So read the docs and use the native jQuery functions since they’ll run faster than any self-written function. At the very least, they’ll contribute to the conciseness and readability of the code.

Article 50 Best jQuery plugins – June 2009

I was hanging around jQUery plugin website, and I have found some really cool plugins.

• jQTouch | Demo
  
  A jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.
• Fullsize | Demo
  
  Fullsize is an attempt to get a new <IMG> attribute called fullsize into the next version of HTML. Hopefully this site will get the attention of the W3C, and they will add fullsize to HTML and make it a standard.
• Airport – Information Board Text Effect | Demo
  
  Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometime find on airports and train stations.
• jScrollPane | Demo
  
  jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS.
• jTip | Demo
  
  jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.
• TabSorter | Demo
  
  tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
• FCBKcomplete | Demo
  
  Fancy facebook-like dynamic inputs with auto complete & pre added values. If you have any comments or requests, please post them and I will try to include all the requested features in the upcoming release.
• MopTip | Demo
  
  MopTip is a elegant and beautiful customized tooltip.
• MopBox | Demo
  
  MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one children, slider navigation is shown automatically.
• MopSlider | Demo
  
  MopSlider is the slider box can contain any item that is set height & width. From 2.2, MopSlider can be put 2 in the page.

Don’t forget to share this article to show your support!

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

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.

Toggle with CSS & jQuery

Smart Columns with CSS & jQuery

Fade in – Fade out

Newsticker made by CSS and 10 lines of jQuery

CSS Dock Menu

How to Make a Smooth Animated Menu with jQuery

Targeting Advanced Elements in jQuery

Page Peel Effect with jQuery & CSS

jBreadCrumb

CSS Gradient Text Effect

Wer auch diesmal weitere interessante jQuery-Anwendungsbeispiele ( für togglen, faden, sliden ) kennt und sie mit anderen teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren.

Switch Display Options

Animated Drop Down Menu

Image-Gallery by using z-index

sIFR Plugin

Popup Bubble

Puzzle

Supersized – Full Screen Background/Slideshow

jQuery Virtual Earth Example (Inline)

Word Counter

autoResize

360 panorama view

Horizontal Accordion

Pamoorama

Simple panorama viewer

Animated InnerFade

Pirobox (Popup)

s3Slider

Simple slide panel

quickSearch

clueTip (Tooltip)

Wer auch diesmal weitere interessante Anwendungsbeispiele dieses JavaScript-Frameworks kennt und sie mit anderen teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren.

Tab-Navigation

Moving Navigation

Sliding Navigation

jParallax

Fancy-Zoom

jQZoom

Text-Zoom

Context-Highlighting

jQuery-Charts

Decorative Gallery

Wer weitere interessante Anwendungsbeispiele zu diesem JavaScript-Framework kennt und sie mit anderen teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren. So können den bisherigen jQuery-Tutorials, auf diese Weise noch ein paar nützliche Links hinzugefügt werden.