Webmaster tips » JavaScript

Jul 27, 2009
Andreas Nylin

4 Performance Tips for Elements Matching in jQuery

Average rating:
  • 5 out of 5 Stars
Rate this article
  1. Always use ID to select an element if you can. This is the fastest way to select elements.
  2. Avoid matching elements by class name. Selecting with class name only will make jQuery search every element in the entire page. If you need to match elements by classname then use the element tag combined with the class name.

    Avoid this: jQuery(".ElementClass")

    Do this: jQuery("div.ElementClass")

  3. Narrow it down. For example, if you know that the elements you want to select are in the top menu of the page then specify it when selecting.

    jQuery("#TopMenu").find("li.MenuItem");

  4. Avoid selecting the same element more than once. Store your selected element or use chaining.

    Avoid this:

    jQuery("#MyElement").addClass("SelectedItem");

    jQuery("#MyElement").show();

    Do this:

    jQuery("#MyElement").addClass("SelectedItem").show();

    Or this:

    var myElement = jQuery("#MyElement");

    myElement.addClass("SelectedItem")

    // some more code...

    myElement.show();

Print! Print this article   Bookmark:

About The Author
Andreas Nylin is a developer working for Dropit. His other blog posts could be found here.
Rate This Article
How would you rate the quality of this content? Currently rated: 5 out of 5 stars. 1 people have rated this article.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other JavaScript Articles
Rating: 4 stars
 Partial Page Rendering Using Hidden IFrame by Madhusudan Pagadala (May 24, 2007)
Partial-page rendering removes the need for the whole web page to be refreshed as the result of a postback. Instead, only individual regions of the page that have changed are updated. As a result, users do not see the whole page reload with every postback, which makes user interaction with the Web page more seamless...