Caching Returned Elements

When you have to use the same selector many times, it is much better to cache the returned element(s) in a variable. This will avoid multiple scans and improve performance.

As an example:

$("a .externalLink").click( function () {
  $("a .externalLink").removeClass("marked");
  $("a .externalLink").addClass("visited");
});

can be written as:

var $linkExternal = $("a .externalLink");
$linkExternal.click( function () {
  $linkExternal.removeClass("marked");
  $linkExternal.addClass("visited");
});

This way the browser only has to scan the document once rather than three times. Even though the performance gain in this case might be minimal, when you are using a large number of selectors the improvement will be significant.

Tagged: