As mentioned above, the ID selector provides the fastest speed. So in HTMLCode.
Let's take a look at the following example:
// Create a listvar $ mylist =$ ('# mylist'); var mylistitems =' <ul> '; for (I = 0; I <1000; I ++) {mylistitems + = '<li class = "listitem' + I + '"> This Is a list item </LI> '; // here we use class} mylistitems + = '</ul> '{}mylist.html (mylistitems); // select each Li for (I = 0; I <1000; I ++) {var selecteditem = $ ('. listitem '+ I );}
At the end of the Code, it took a total of 5066 milliseconds to select each Li, over 5 seconds.
Next we will make a comparison and use ID instead of class:
// Create a listvar $ mylist =$ ('# mylist'); var mylistitems =' <ul> '; for (I = 0; I <1000; I ++) {mylistitems + = '<li id = "listitem' + I + '"> This Is a list item </LI> '; // here the ID} mylistitems + = '</ul> '{}mylist.html (mylistitems) is used; // select each lifor (I = 0; I <1000; I ++) {var selecteditem = $ ('# listitem' + I );}
In the previous code, it took only 61 milliseconds to select each Li, which is nearly 100 times faster than the class method.
9. Give the selector a context.
The jquery selector has such a selector, which can specify the context.
Jquery (expression, context );
This is a method added after jquery1.3.1. The function of this method is to dynamically bind events to the newly added DOM elements.
However, for efficiency, this method occupies resources. So try not to use it.
For example, there is a piece of code:
<SCRIPT type = "text/JavaScript"> $ (function () {$ ("p "). click (function () {alert ($ (this ). text () ;}); $ ("button "). click (function () {$ ("<p> This is Second P </P> "). appendto ("body ");});}) </SCRIPT> <body> <p> This is first P </P> <button> Add </button> </body>
After running, you will find that the new P element is not bound to the click event.
You can solve this problem by changing to. Live ("click"). The Code is as follows:
$ (Function () {$ ("p "). live ("click", function () {// change to the live mode alert ($ (this ). text () ;}); $ ("button "). click (function () {$ ("<p> This is Second P </P> "). appendto ("body ");});})
But I do not recommend that you do this. I want to solve this problem in another way. The Code is as follows:
$ (Function () {$ ("p "). click (function () {alert ($ (this ). text () ;}); $ ("button "). click (function () {$ ("This is Second P
"). click (function () {// rebind alert ($ (this) for the newly added element ). text ());}). appendto ("body ");});})
Although I re-wrote the binding event and added more code, this method is much more efficient than the live () method,
This is especially evident in frequent Dom operations.
11. Child selector and descendant Selector
Descendant selector is often used, for example: $ ("# list p ");
The descendant selector obtains all elements inside the element.
Sometimes, as long as the child element is obtained, the descendant selector should not be used.
The sub-Selector should be used. The Code is as follows:
$ ("# List> P ");
12. Use the data () method to store temporary variables
Below is a very simple piece of code,
$ (Function (){
VaR flag = false;
$ ("Button"). Click (function (){
If (FLAG ){
$ ("P"). Text ("true ");
Flag = false;
} Else {
$ ("P"). Text ("false ");
Flag = true;
}
});
})
After the data () method is used, the Code is as follows:
$ (Function (){
$ ("Button"). Click (function (){
If ($ ("p"). Data ("flag ")){
$ ("P"). Text ("true ");
$ ("P"). Data ("flag", false );
} Else {
$ ("P"). Text ("false ");
$ ("P"). Data ("flag", true );
}
});
})
This is the end of jquery performance optimization Guide (3. I believe you also have your idea. Please share it with me. Email: cssrain@gmail.com author's blog: http://www.cssrain.cn
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
