JQuery Tips (4) Some Tips for improving JQuery Performance

It is best to start with an ID selector when selecting

I think this is easy to understand, because JQuery uses document. the getElementByID method performs ID selection. This method is faster than all other DOM selection methods, so it is best to start with $ ("#"), for example:
Copy codeThe Code is as follows:
<Div id = "a">
<Div class = "B">
<Div class = "c">
<Div class = "d"> </div>
</Div>
</Div>
</Div>
<Script type = "text/javascript">
$ (". B. c. d") // slow one
$ ("# A. B. c. d") // fast one
</Script>

Context of $ ()
When you use $ () to select page elements, provide the selected range to reduce the selection time. In other words, filtering the selector within a small area of the page instead of the entire page reduces the filtering time. This can be achieved by providing the second parameter in the $ () function as the context.
Copy codeThe Code is as follows:
<Div id = "test">
<Div class = "inner"> hi </div>
</Div>
<Script type = "text/javascript">
Alert ($ (". inner", document. getElementById ("test"). text (); // increase the speed by provide context
Alert ($ (". inner"). text (); // traverse all the element so that is slower than abve
</Script>

Of course, in jquery-defined (or js function) events, you can use this to refer to the context:
Copy codeThe Code is as follows:
<Div id = "test">
<Div class = "inner"> hi </div>
</Div>
<Script type = "text/javascript">
$ ("# Test"). click (function (){
Var text = $ (". inner", this). text (); // this means $ ("# test ")
Alert (text); // alert hi
});
</Script>

Of course, the above example can also be written in the following two ways:
Copy codeThe Code is as follows:
<Div id = "test">
<Div class = "inner"> hi </div>
</Div>
<Script type = "text/javascript">
Alert ($ ("# test. inner"). text (); // method 1
Alert ($ ("# test"). find (". inner"). text (); // method 2 and it was best one
</Script>

The use of the find method is the most efficient among all methods.

Of course, if you use the id selector, that is, $ ("#..."), you do not need to provide context parameters. This does not affect the speed.

Save frequently-used elements encapsulated by JQuery
This is important, for example, because it takes time to select page elements by using $ (). Saving it as a variable can avoid this waste. For example:
Copy codeThe Code is as follows:
<Ul>
<Li> one </li>
<Li> two </li>
<Li> three </li>
<Li> four </li>
<Li> five </li>
</Ul>
<Script type = "text/javascript">
For (I = 0; I <$ ("ul li "). length; I ++) {// very bad, select $ ("ul li") so many times, waste a lot of time
Alert ($ ("ul li") [I]. innerHTML); // same here, very bad
}
Var $ li = $ ("ul li ");
For (I = 0; I <$ li. length; I ++) {// good one, only selct $ ("ul li") once
Alert ($ li [I]. innerHTML); // same here, good
}
</Script>

As you can see from the code, avoiding repeated selections can improve performance :-)



Use as few selector as possible
JQuery's selector is array-oriented, so use as few as possible when conditions permit, such:
Copy codeThe Code is as follows:
<Div id = "Div0"> </div>
<Div id = "Div1"> </div>
<Div id = "Div2"> </div>
<Script type = "text/javascript">
$ ("# Div0"). slideDown ("slow ");
$ ("# Div1"). slideDown ("slow ");
$ ("# Div2"). slideDown ("slow"); // slow

$ ("Div0, Div1, Div2"). slideDown ("slow"); // fast
</Script>

It can be seen that using the selector and separating the selected elements with commas, and selecting multiple elements not only makes the code more concise, but also improves the performance by reducing the number of JQuery instances!



Avoid using $ (). each when there are many cycles, and use for Loop
Use $ (). the each method makes programming easier when looping, while a small number of loops are using $ (). the effect of each on performance is negligible. However, when this number is large, the impact on performance starts to become significant.

This number. I checked the information. It is said that the $ (). each method can be used below 1000. If this number continues to increase, the for loop statement should be used.



Minimize DOM operations
DOM operations are relatively expensive on the page (for example, inserting or deleting a piece of text on the page). Minimizing this change is the best practice to maintain performance! For example:
Copy codeThe Code is as follows:
<Ul id = "test">
</Ul>
<Script type = "text/javascript">
Var $ list = $ ("# test ");
For (I = 1; I <101; I ++ ){
$ List. append ("<li> Item" + I + "</li> ");
} // Very bad, change dom 100 times

Var listItem = "";
For (j = 1; j <101; j ++ ){
ListItem + = "<li> Item" + j + "</li> ";
}
List.html (listItem );
// Good practice, only modify dom once

</Script>

We can see that the first example modifies the DOM 100 times, while the second example only modifies the DOM once. The above performance gap is obvious.



JQuery animation effects can be shielded.
In some cases, if JQuery animation can be disabled, the performance can be improved. The blocking method is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery. fx. off = true;
</Script>

If the parameter can be a JS object, try to use the object
For JQuery plug-ins, or JQuery's css and attr methods both accept key/value or js key/value object pairs as parameters, passing key-value objects can reduce the creation of JQuery objects, such:
Copy codeThe Code is as follows:
<Div> </div>
<Script type = "text/javascript">
$ ("Div" ).css ("display", "block ");
$ ("Div" ).css ("background-color", "blue ")
// Slow, because it create more Jquery object

$ ("Div" ).css ({"display": "block", "background-color": "blue "});
// Fast, only create one object
</Script>

You can also use the concatenation method:
Copy codeThe Code is as follows:
<Div> </div>
<Script type = "text/javascript">
$ ("Div" ).css ("display", "block" ).css ("background-color", "blue ");

</Script>

However, the performance of this method is not as good as the above. Two methods are required and temporary objects need to be generated.

The above are some small Tips for JQuery Performance Improvement