jquery Common Selector Performance test

can be flexible on the page of the JS code fragments to test, when used as long as the firejspt of the class library file import can:

<script type= "Text/javascript" src= "Firejspt.js" ></script>

Using FIREJSPT, the common selector for jquery was tested under Firefox, and the test environment was as follows:

• Operating system: Windows 7 flagship version
• Browser: Firefox 3.6.13
• Plugins: Firebug 1.60 (no additional plugins installed)
jquery Version: 1.44
Hierarchy selector (ul li) vs. find
The HTML structure is as follows:

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 Testing </a></li> <li><a href= "#" >jquery Common selector performance test </a></li> <!--omit 455 li tags; <li> <a href= "#" >jquery Common selector performance test </a></li> </ul>

First of all thanks to Comrade Redky's reminder that my test was too one-sided to cause the test results are very questionable, I now try to simulate the real environment to test again. The HTML code above duplicates 500 Li tags, writes two functions testFun1 and testFun2 respectively, and binds one click event, respectively, with JavaScript code as follows:
/* Introduction of version 1.44 of jquery's library file */

The code is as follows

Copy Code

<script type= "Text/javascript" src= "Jquery.js" ></script> * * Introduction of FIREJSPT library file * * <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 2 functions to test/* $ (function () { Jspt.test (function () {testFun1 ();}); Jspt.test (function () {testFun2 ();}); }); </script>

The test results are shown below:

As you can see from the diagram above, if there is only one ul.list DOM node in the page, find is faster than the hierarchy selector. The structure of the entire ul.list>li is reproduced 2 times, and the following structure is reproduced:

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> <!--omit 455 li tags--> <li><a href= "#" >jquery Common selector performance test </a></li> </ul> <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> <!--omit 455 li tags--> <li><a href= "#" >jquery Common selector performance test </a></li> </ul> <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> <!--omit 455 li tags--> <li><a href= "#" >jquery Common selector performance test </a></li> </ul>

Test Results Chart:

As you can see from the diagram above, if you have multiple DOM nodes such as ul.list, the level selector is faster than find. So we can draw a conclusion that, in general, if the DOM node in the page is unique, use Find to look up its child nodes faster than the hierarchy selector, and if there are multiple nodes with the same class name in the page, use Find to locate its child nodes slower than the hierarchy selector.

Comparison of hierarchy selector (ul > li) and children
To test with the same method above, 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= "/" >australian Casino sites</a >}); }

A test result graph with only one ul.list DOM node:

Three ul.list DOM node test results chart:

This gap is not very large, children slightly better, the result is the same as the original test method for the loop completely opposite.

Comparison of 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 changed 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 Results Chart:

Knowing JavaScript knows that the ID selector is definitely faster than the class selector, as for how fast it should have a more plausible answer.

Common examples of jquery selectors

Gets the value of the hidden input with name only

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

Radio Set Value

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 selectors, jquery has been optimized, they can work well, you don't usually have to worry too much. However, we can do a little bit of improvement that will make your script slightly better.

Generally in jquery can not use the Sizzle engine do not use, of course, as long as possible, the use of. Find () method. Like what:

The code is as follows	Copy Code
$ (' #someDiv p.someclass '). Hide (); $ (' #someDiv '). Find (' P.someclass '). Hide ();

The 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 preceding sentence.
Modern browsers (except IE6,IE7) have Queryselectorall support that allows you to get objects like CSS selectors without having to use the sizzle engine in jquery. jquery checks for the existence of this function before using its own engine.

For Ie6/ie7, jquery uses the sizzle engine, and jquery converts your selector into an array, and it iterates through the right to the left. Matches every element of the page through regular expressions, so you can minimize the level of selectors, use the rightmost selector as much as possible, such as using the ID selector, and this rule and our CSS lookup rules are always there, if you want to optimize the CSS selector also know this rule: from right to left to iterate the match!

Scale grasp:

1. Keep the code simple

2. Use Find () as much as possible, using the browser's native lookup function

3. Use the rightmost selector as much as possible, such as ID

or condition: (separated by commas)

Such as:

The code is as follows	Copy Code
$ ("#tableList"). Find ("Tr.row_even,tr.row_odd"). Click (function () { Alert (' Test '); });