Performance Optimization of JQuery Teaching

JQuery is a very good javascript framework. When we use jQuery, we don't want to return to the lengthy javascript code, so jQuery's optimization is in front of us. So what aspects should we start with to optimize JQuery?

1. Use the latest version of jQuery

Compared with the old version, the new version improves performance and adds new features.

2. Use of Selector

We usually use id selector, class selector, element selector, pseudo-class selector, and element selector. In use, we recommend that you use the id selector, followed by the class selector> Element selector> pseudo class selector.

When it comes to selectors, it is not mandatory to insert a sentence. When you use selector to query, it is best to start from the parent element with id to perform a step-by-step search.

3. Do not over-use jQuery

Remember that the native one sentence is the fastest. JQuery is write less, do more (write less, do more ).

4. cache well

At that time, a node can be used for storage with a variable and called again during use. Avoid repeated node acquisition and reduce efficiency.

Copy codeThe Code is as follows:
Var inputSelect = $ ("# head. head_right input ");
InputSelect. find ("");
InputSelect. find ("I ");

5. Use chained operations

One of the highlights of jQuery is that it can be chained.

Copy codeThe Code is as follows:
$ ("# Content"). find (". div" ).eq(2).html ("Hello World ");

6. Event Delegation

When multiple same-level elements are required to execute a type of event, event delegation can be used. Example:

Copy codeThe Code is as follows:
<Div id = "content">
<Div>
<Div>
<Div>
<Div>
<Div>
<Div>

When every class = "div" div has a click event, we can use event delegation,

Copy codeThe Code is as follows:
$ ("# Content"). on ("click", "div", function (){
((This).css ("color", "# ff5500 ");
});

7. Correct processing cycle

Loop is a time-consuming operation. If you can use a selector to directly select elements, do not use loops to traverse elements one by one.

The native methods of Javascript for and while are faster than jQuery's each. Therefore, native methods should be preferred.

8. Reduce JQuery object generation

When a Query object is generated, corresponding attributes and methods are generated, which occupy resources. Therefore, reduce jQuery object generation as much as possible.

9. Scope of Variables

When a variable does not need to be called in multiple functions, the variable should be placed in the function to reduce the time for code query during code execution.

10. postpone some functions to $ (window). load for execution.

$ (Document). ready is really easy to use, but when it can be rendered on the page, other elements are executed before being downloaded.

11. Merge scripts

All scripts are loaded one by one, reducing the number of scripts can also improve efficiency.

12. Element Encapsulation

When you insert a content to a node, You can encapsulate the content before inserting it.

Copy codeThe Code is as follows:
Var content = "";
$ ("# Head" Contents .html (content );

In addition, JavaScript files are compressed.

With the continuous use of jQuery, more and more optimization methods will be discovered.