In-depth analysis of jQuery selector: Avoid unnecessary calls

Last week, I carefully analyzed a Web page. It took 4.8 seconds to process a custom script file in the onLoad event. The result is that 2.8 seconds are consumed on the dynamic menu Library (which will be recorded separately in the blog), and the remaining 2 seconds are spent on the jQuery selector. Analysis shows that most selectors do not return any objects, but those that return objects may consider using different selectors to improve performance.

About jQuery Selector

There are a large number of log articles discussing jQuery selectors and their performance impact. As you know, you can use ID, TagName, or ClassName to select elements. Depending on the selector, jQuery uses the local method of the browser, for example, using ID or label to select an element, alternatively, you must manually retrieve the elements from the DOM when selecting a class name (because the corresponding getElementsByClssName does not exist in IE ).

Analyze the two seconds in my page time

In the onLoad processor, set jQuery to hide, display, or change the style sheet for certain elements on the page .... Here is a code snippet:

JQuery script example in onLoad

The onLoad event processor is filled with such calls. By using the free dynaTrace AJAX Edition, you will see the $ call parsed as a selector, and with those method calls, the selector can get at least one object. The following uses PurePath to observe the onLoad event processor, which not only shows the time consumed by each selector call, it also includes the number of objects actually found when there are more than one object (no method call is available for an object ).

Unnecessary jQuery selector calls lead to unnecessary overhead

None of the calls marked in red return an element because there is no DOM element directly based on the query condition. The JS column shows the execution time of each individual method call, ranging from 1 ms to more than 100 ms. The Size column shows how many JavaScript/DOM method calls are generated for each separate call ). Here we can also understand why some $ calls take so long because they actually make many calls to complete the request. The Invocation column tells us how often this method is called by its parent. Here we can see that some objects are actually parsed multiple times, such as: ". pop-cart ". The best practice is to parse the object only once and cache it.

The first lesson we learned here is that most of the above calls are unnecessary and will only produce excessive consumption. If you know exactly what page elements you need to parse, do not try to parse other objects. I know that using a global script file to process different content on different pages can lead to this situation -- but -- are you willing to live in this meaningless overhead?

Analysis of jQuery selector differences

The first problem on the Analysis page is that there are too many unnecessary calls. Another question is why some $ Methods respond quickly (several microseconds), while others take a long time (over 100 ms ). For the theoretical answer, see jQuery Best Prtice Blog. Return to my page and it prompts me the following conclusion:

ID selector, that is, using getElementById, is the fastest

Shows a selector using ID. It uses getElementById, so it will be returned soon.

JQuery ID Selector

The TagName selector uses getElementsByTagName.

The following example uses TagName and ClassName to select elements. JQuery first uses the local implementation of getElementsByTagName to obtain all the elements of the specified tag. Then traverse them to filter ClssName.

JQuery Tag and ClassName Selector

The ClassName selector needs to traverse all DOM elements.

If you only use the ClassName selector-jQuery needs to traverse every element in the DOM, because no local implementation corresponding to getElementsByClassName is available in Internet Explorer (for FireFox, another scenario. It shows the overhead of selector usage on pages with 3460 DOM elements.

JQuery ClassName Selector

Summary

Depending on the size of your Web site (the number of DOM elements), you need to consider the overhead of each individual selector method. Compared with ClassName, you should give priority to using TagName and ClassName, or use a unique ID when there are only a few objects on your page. And-ensure that the resolved objects are cached to avoid the beginning of the second parsing call. Also, we should pay attention to this point in the end-to avoid unnecessary calls. As shown in the previous page, if the number of-2 seconds I analyzed exceeds 1.5 seconds, the call can be avoided.

Original article title: 101 on jQuery Selector Performance

Address: http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/