JQuery common selector performance test

Now there are more and more friends who use jquery, but there are also various jquery selectors. Let's test common jQuery selectors for you. If you need to know about them, please refer to them.

You can flexibly test JS code snippets on the page. When using this function, you only need to import the FireJSPT class library file:

<Script type = "text/javascript" src = "firejspt. js"> </script>

Using FireJSPT, Benbo tests the commonly used jQuery selector in Firefox. The test environment is as follows:

• Operating System: Windows 7 flagship version
• Browser: Firefox 3.6.13
• INS: Firebug 1.60 (Other INS are not installed)
• JQuery version: 1.44
Comparison between level selector (ul li) and find
The HTML structure is as follows:

The Code is as follows:

Copy code

<Ul class = "list"> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <! -- 455 li tags are omitted --> <Li> <a href = "#"> jQuery common selector performance test </a> </li> </Ul> renew

First of all, I would like to thank comrade redky for reminding me that my tests were too one-sided and the test results were very questionable. Now I try to simulate the real environment to try again. The above HTML code copies 500 li tags, respectively writing two functions testFun1 and testFun2, and binding one click event respectively. The JavaScript code is as follows:
/* Introduce the jQuery library file of version 1.44 */

The Code is as follows:

Copy code

<Script type = "text/javascript" src = "jquery. js"> </script> /* Introduce the library file of FireJSPT */ <Script type = "text/javascript" src = "firejspt. js"> </script> <Script type = "text/javascript"> Function testFun1 (){ $ (". List a"). click (function () {alert ("Hello World ");}); } Function testFun2 (){ $ (". List"). find ("a"). click (function () {alert ("Hello World ");}); } /* Call two functions for test */ $ (Function (){ Jspt. test (function () {testFun1 ();}); Jspt. test (function () {testFun2 ();}); }); </Script>

The test result is as follows:

It can be seen that if there is only one ul. list DOM node in the page, the find speed is faster than the level selector. Copy the entire ul. list> li structure twice. The copied structure is as follows:

The Code is as follows:

Copy code

<Ul class = "list"> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <! -- 455 li tags are omitted --> <Li> <a href = "#"> jQuery common selector performance test </a> </li> </Ul> renew <Ul class = "list"> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <! -- 455 li tags are omitted --> <Li> <a href = "#"> jQuery common selector performance test </a> </li> </Ul> renew <Ul class = "list"> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <Li> <a href = "#"> jQuery common selector performance test </a> </li> <! -- 455 li tags are omitted --> <Li> <a href = "#"> jQuery common selector performance test </a> </li> </Ul> renew

Test result diagram:

We can see that if there are multiple DOM nodes such as ul. list, the hierarchical selector is faster than find. Then we can draw a conclusion that if the DOM node on the page is unique, use find to find its child nodes faster than the hierarchical selector, if there are multiple nodes with the same class name on the page, use find to find its subnodes at a slower speed than the hierarchical selector.

Comparison between hierarchical selector (ul> li) and children
Use the same method for testing. The modified JavaScript code is as follows:

The Code is as follows:	Copy code
Function testFun1 (){ $ (". List> li"). click (function () {alert ("Hello World ");}); } Function testFun2 (){ $ (". List "). children ("li "). click (function () {alert ("Hello World"); <A href = "/"> financialian casino sites </A> }); }

Test results of only one ul. list DOM node:

Test results of three ul. list DOM nodes:

This gap is not big. children is better than one. This result is completely different from the test method used for loop.

Comparison between id and class selector
The HTML structure is as follows:

The Code is as follows:	Copy code
<Div id = "test"> jQuery common selector performance test </div> <Div class = "test"> jQuery common selector performance test </div>

The modified JavaScript code is as follows:

The Code is as follows:	Copy code
Function testFun1 (){ For (var I = 0; I <1000; I ){ $ ("# Test"). click (function () {alert ("Hello World ");}); } } Function testFun2 (){ For (var I = 0; I <1000; I ){ $ (". Test"). click (function () {alert ("Hello World ");}); } }

Test result diagram:

All JavaScript users know that the id selector must be faster than the class selector. As for the speed, there should be a more reliable answer.

Common examples of Jquery Selector

Obtain the value of hidden Input with only Name

The Code is as follows:	Copy code
$ ("Input [type = hidden] [name = hiding Input name]"). val () or $ ("input [name = name of the hidden Input]: hidden "). val ()

Radio settings

The Code is as follows:	Copy code
$ ("Input [type = radio] [value = value]"). attr ("checked", true ); Eg. $ ("input [type = radio] [value =$ {order. paymentMethod}]"). attr ("checked", true );

JQuery has a very powerful Sizzle engine to implement selector. jQuery has been optimized and they can work well. You generally don't have to worry too much. However, we can make some improvements, which will slightly improve your script.

Generally, the Sizzle engine should not be used in jquery. Of course, as long as it is possible, try to use the. find () method. For example:

The Code is as follows:	Copy code
$ ('# SomeDiv p. someClass'). hide (); $ ('# Somediv'). find ('p. someClass'). hide ();

The execution results of the above two lines of code are exactly the same, but the efficiency of the following sentence is higher than that of the above sentence.
Modern browsers (except IE6 and IE7) Support QuerySelectorAll, which allows you to obtain objects like CSS selectors without using the Sizzle engine in jQuery. JQuery checks whether this function exists before using its own engine.

For IE6/IE7, jQuery needs to use the Sizzle engine. jQuery will convert your selector into an array and iterate matching from right to left. Use regular expressions to match every element on the page. Therefore, you can minimize the level of the selector and use the rightmost selector, such as the ID selector; this rule is consistent with our css Search rules. If you want to optimize the css selector, you also need to know this rule: Iterative Matching from right to left!

Scale GRASP:

1. Keep the code simple

2. Try to use find () to search, and use the native search function of the browser.

3. Try to use the rightmost selector, such as ID.

Or condition: (separated by commas)

For example:

The Code is as follows:	Copy code
$ ("# TableList"). find ("tr. row_even, tr. row_odd"). click (function (){ Alert ('test '); });