When choosing, it is best to start with an ID selector
I think that's a good idea because jquery uses the document.getElementById method for ID selection, which is faster than all other methods of DOM selection, so it's best to start with $ ("#"), such as:
Copy Code code 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. D")//fast one
</script>
Provides a context for $ ()
When you select a page element using $ (), providing a range of choices can reduce the time of choice, in other words, having the selector filter only within a small slice of the page rather than the entire page will certainly reduce the filter time by providing a second argument within the $ () function as a context
Copy Code code 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 of the element so this is slower than above
</script>
Of course, in the jquery definition (or JS function) event, you can use this to refer to the context:
Copy Code code 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 Code code 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 is best one
</script>
The use of Find method is the most efficient in all methods.
Of course, if you are using the ID selector, which is $ ("#..") To select, you do not need to provide context parameters. This has no effect on speed.
Save the frequently used jquery wrapped elements
This is important because it takes time to select a page element using $ (). Save as a variable to use, you can avoid this waste, such as:
Copy Code code 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
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>
From the code you can see that avoiding multiple repeated selections can lift high-performance:-)
Try to use fewer selectors
The jquery selector is array-oriented, so use fewer selectors when conditions permit, such as:
Copy Code code 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>
As you can see, using selectors to separate selected elements with commas and selecting multiple elements not only makes the code simpler, but also slightly better performance by reducing the number of instances that create jquery!
Avoid the use of $ (). Each while using a for loop for a large number of loops
Use the $ (). Each method makes programming easier when looping, and a small number of loops use $ (). The effect of each is negligible, but when the number is large, the impact on performance begins to become considerable.
This number, I looked up the data, which is said to be 1000 the following can be used $ (). Each method, and if this number continues to increase, you should use a For loop statement.
Minimize manipulation of the DOM
In a page where DOM operations are more consumed (such as inserting or deleting a piece of text on a page), minimizing this change is the best practice for maintaining performance! Like what:
Copy Code code as follows:
<ul id= "Test" >
</ul>
<script type= "Text/javascript" >
var $list = $ ("#test");
for (i = 1; i < i++) {
$list. Append ("<li>item" + i + "</li>");
}//very Bad,change Dom
var listItem = "";
for (j = 1; J < + j) {
ListItem + + "<li>item" + j + "</li>";
}
$list. HTML (listItem);
Good practice,only modify DOM once
</script>
As you can see, the first example modifies the DOM 100 times and the second modifies the DOM only 1 times, and the performance gap above is obvious.
Can mask the animation effect of jquery
In some cases, if you can turn off the jquery animation, you can improve performance, shielding methods are:
Copy Code code as follows:
<script type= "Text/javascript" >
JQuery.fx.off = true;
</script>
If the parameter can be a JS object, use the object as much as possible
The jquery plugin, or the CSS and attr methods of jquery, all accept key/value or JS key/value object pairs as parameters, passing key value objects can reduce the creation of jquery objects, such as:
Copy Code code 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>
Of course, you can also use the consonant method:
Copy Code code as follows:
<div></div>
<script type= "Text/javascript" >
$ ("div"). CSS ("Display", "block"). CSS ("Background-color", "Blue");
</script>
But this is not as good as the one above. Two methods are required and more temporary objects need to be generated.
These are some tips for improving jquery performance
