Some reference suggestions for jquery performance optimization

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