JQuery selectors are everywhere. Do you know their performance ?, Jquery Selector

JQuery selectors are everywhere. Do you know their performance ?, Jquery Selector

Nowadays, jQuery is becoming more and more popular on the website. Therefore, even a little bit of understanding, advantages, and shortcomings of jQuery are more and more worthy of research and discussion. Recently, I have made some small experiments on jQuery selector usage to demonstrate Which of the following is more efficient and worth using different jQuery selectors under different circumstances.

First, introduce the jquery file provided by google and the small plug-in firejspt for testing in the head of each test page.

<! -- Introduce the library file of FireJSPT --> <script type = "text/javascript" src = "firejspt. js"> </script> <! -- Introduce jQuery library files of version 1.44 provided by google. In fact, it doesn't matter which version, haha --> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>

1. The most common id selector and class selector
Copy the following code 200 times and place it in the body tag.

<Div id = "ilian"> comparison id selector and class selector </div> <div class = "ilian"> comparison id selector and class selector </div>

The JS Code used for this test is as follows:

Function ilianTest01 () {$ ('# ilian '). click (function () {alert ('Hello World') ;});} function ilianTest02 () {$ ('. ilian '). click (function () {alert ('Hello World') ;});}/* call two functions for testing */$ (function () {jspt. test (function () {ilianTest01 () ;}); jspt. test (function () {ilianTest02 ();});});

The test results are as follows:

The efficiency advantage of id selector compared with class selector is very good .....
With this test address: http://www.threesnow.com/code/090/ilian_01.html


2. the hierarchical selector is frequently used when selecting tags. In this comparison test, the sub-label symbols ">" and children are used directly.

Put the following code into the body tag and copy the li tag 500 times.

<Ul id = "ilian"> <li> compare the direct sub-tag symbols ">" and children </li> <li> compare the direct sub-tag symbols ">" and children </ li> <li> compare the direct sub-label symbols ">" and children </li> <! -- Omitted 497 times --> </ul>

The JS Code used for this test is as follows:

Function ilianTest01 () {$ ('# ilian> li '). click (function () {alert ('Hello World') ;});} function ilianTest02 () {$ ('# ilian '). children ('lil '). click (function () {alert ('Hello World') ;});}/* call two functions for testing */$ (function () {jspt. test (function () {ilianTest01 () ;}); jspt. test (function () {ilianTest02 ();});});

Test results:

The children selector is better than the direct sub-tag symbol selector.
With this test address: http://www.threesnow.com/code/090/ilian_02.html

Limited by the length of the article, this article only shows the most basic tests, and the above tests are all tested in a simple environment, the test results do not represent an absolute conclusion.

If the article is useful, do not forget to recommend it ~~