JQ3.1 Document: Https://pan.baidu.com/s/1c2vMQdy
First, note when defining jquery variables, add the var keyword
This is not only JQ, it must be in JS.
Second, if there are multiple variables can use a var
Eg:var index=0, $main =$ (". Main");
Third, the definition of jquery variable is to add the $ symbol
Eg:var $main =$ (". Main"); facilitates the reading of code
Iv. DOM Operations Be sure to remember the cache
Dom operations are very resource-intensive, and generally most people like to do this directly:
$ (". Main"). html ("End");
$ (". Main"). Show ();
The better is:
var $main =$ (". Main");
To operate again
V. Using chained operation
The above can be more simplified:
var $main =$ (". Main");
$main. HTML ("End"). Show ();
Vi. Streamlining the jquery code
Try to integrate some of the code together, as below
$btn. Click (function () {
$main. css (' width ', ' 80% ');
$main. CSS (' Display ', ' block ');
});
This should be the case:
$btn. Click (function () {
$main. CSS ({
"width": "80%",
"Display": "Block"
})
});
Vii. avoiding the use of global type selectors
Do not write in the following ways: $ (' .something> * ');
This is better written: $ ('. something '). Children ();
Eight, do not overlay multiple IDs
Do not write as follows: $ (' #something #children ');
This is enough: $ (' #children ');
Nine, multi-use logical judgment | | or && to speed up
Do not write as follows:
if (! $something) {
$something = $ (' #something ');
}
This writing performance is better:
$something = $something | | $ (' #something ');
Ten, try to use less code
Write it this way: if (string.length> 0) {...}
Why not write this: if (string.length) {...}
Xi. try to use the. On method
If you are using a newer version of the JQuery class library, use. On, and any other method is finally implemented using. On.
12. Try to use the latest version of jquery
The latest version of jquery has better performance, but the latest version may not support IE6/7/8, so you need to choose for yourself.
13. Use native JavaScript as much as possible
If the functionality provided by jquery can be implemented using native JavaScript, it is recommended to use native JavaScript.
Eg:for in
14. Always inherit from #id selector
This is a golden rule of the jquery selector. jquery the quickest way to select an element is to select it with an ID.
or inherit from the ID selector to select multiple elements:
eg:$ (' #main p '). Hide ();
XV, use tag in front of class
The second fastest selector in jquery is the tag selector (such as $ (' head ')) because it and the JavaScript method that comes directly from the native
Getelementbytagname (). So it's best to always use tag to modify class (and don't forget the nearest ID)
The class selector in jquery is the slowest because it iterates through all the DOM nodes in IE browser. Try to avoid using the class selector. Also do not use tag to decorate the ID. The following example iterates through all DIV elements to find the node whose ID is ' content '
16. Using sub-query
Cache the parent object for future use
17. Optimized selector for sizzle "right-to-left" model
Since version 1.3, jquery has adopted the Sizzle library, which differs greatly from the previous version's representation on the selector engine. It replaces the "right-to-left" model with a "left-to-right" model. Make sure the right-most selector is specific, and the selector on the left is wider:
var $linkContacts = $ ('. Contact-links div.side-wrapper ');
18. Use Find () instead of context lookup
The. Find () function is indeed faster. However, if a page has many DOM nodes, it may take more time to look back and forth:
var $divs = $ (' #pageBody '). Find ('. Testdiv ');
20. Caching jquery Objects
Cache the elements you often use:
eg
var $header = $ (' #header ');
var $divs = header.find (' div ');
var $forms = header.find (' form ');
Encapsulates all elements into one element when you want to make a DOM insert
21, the direct DOM operation is very slow. Change the HTML structure as little as possible.
var menu = ' <ul id= ' menu > '; for (var i = 1; i < i++) { + = ' <li> ' + i + ' </li> '+ = ' </ul> '; $ ( c7> ' #header '). prepend (menu); // Never do this:$ (' #header '). Prepend (' <ul id= ' menu ></ul> '); for (var i = 1; i < i++) { $ (' #menu '). Append (' <li> ' + i + ' </li> ');}
22. Although jquery does not throw exceptions, developers should also check objects
Although jquery does not throw a large number of exceptions to the user, developers do not rely on this. jquery usually executes a whole bunch of useless functions before determining whether an object exists. So before you make a series of references to a, you should check that the object does not exist.
23. Use direct functions rather than functions that are equivalent to them
For better performance, you should use direct functions such as $.ajax () instead of $.get (), $.getjson (), $.post (), since several of the following will call $.ajax ().
24. Using the jquery utility function
Don't forget the simple and practical utility function of jquery. My favorite is $.isfunction (), $isArray () and $.each ().
25, deferred to $ (window). Load
Sometimes it takes $ (window). Load () than $ (document). Ready () is faster because the latter does not wait for all DOM elements to be downloaded before they are finished. You should test it before you use it.
26. Add style labels to DOM elements when adding styles to more than 15 elements
$ (' <style type= "Text/css" > Div.class {color:red;} </style> ')
. AppendTo (' head ');
27, compressed into a main JS file, the download times to keep to a minimum
Some reference suggestions for jquery performance optimization