Geek Answers Handbook

Compare jquery selectors performance

Looking to improve the performance of my jquery selectors. so any tips or articles like the best for formant jquery selectors? For example, choosing id div. Anywhere online I can provide html and compare various selectors that I can use to select the element I need.

+4
source share
4 answers

You can compare selector performance here: http://jsperf.com/

Just tweak your HTML, enable jQuery, and put each selector you want to compare as a test case.

Many of the rules here still apply, but the game has changed a bit in jQuery 1.4.3+, after which Sizzle (the jQuery selector) will use querySelectorAll() in browsers that support it.

+10
source

In this article, we will talk in detail about jQuery selectors and their performance. This mainly deals with the proper use of jQuery. Since a lot of jQuery usage revolves around selectors, the article spends some time on them.

Basically a few things to remember:

  • If you're looking for performance, use a selector that delegates its own DOM validation methods ( getElementById , getElementsByTagName )
  • Caching results
  • Pseudo-elements can cause performance degradation.
+1
source

One thing these articles aren't about is that your starting point. If you start with the entire DOM tree, these articles are really helpful.

However, if you have an element to start with, it depends on what your search is for. Most of my dynamic javascript with MVC templates tends to grab the element on which the action is performed and then search for the parent objects. This eliminates the need for a unique container name when they are randomly generated, making things much easier in terms of a dynamic detector.

When searching for the closest parent, a node may not be as fast as searching for an identifier, the performance should be small compared to the amount of time and / or the performance of generating and tracking several unique identifiers.

As with everything in development, “it depends” will reign here.

0
source

I notice that many of these types of questions are limited to comparing performance between different jQuery selectors. I recently came across an article that compares jQuery selectors with their own Javascript counterparts.

This may seem like a lot of trouble, but the performance gain is quite substantial. More than I imagined.

Article: http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/

0
source

More articles:


All Articles