Optimizing the performance of jquery teaching _jquery

jquery is a very good JavaScript framework, and when we use jquery and never want to go back to JavaScript in the lengthy code, then the optimization of jquery is in front of us. So what should we do to optimize jquery?

1, using the latest version of jquery

The new version will make performance improvements for older versions, as well as add functionality.

2, the use of the selector

We usually use ID selectors, class selectors, element selectors, pseudo class selectors, and element selectors. My advice when using is to use the ID selector, followed by the class selector > element selector >element selector > pseudo class selector.

When it comes to selectors, it is not necessary to insert a sentence, in the use of the selector search is best from the ID of the parent element to start down the downward lookup.

3, do not overdo the use of jquery

Remember a word the original is the fastest. jquery is write Less,do more (less written and done more).

4, do a good cache

To reuse a node at that time, you can use a variable to store it, and then call it when you use it. Avoid repeated acquisition of nodes and reduce efficiency.

Copy Code code as follows:

var inputselect = $ ("#head. Head_right input");
Inputselect.find ("a");
Inputselect.find ("I");

5, the use of chain operation

One of the highlights of jquery is that you can use chained operations.

Copy Code code as follows:

$ ("#content"). Find (". Div"). EQ (2). HTML ("Hello World");

6. Event Delegation

Event delegates can be used when multiple sibling elements are required to perform one type of event. Cases:

Copy Code code as follows:

<div id= "Content" >
<div><div>
<div><div>
<div><div>
<div><div>
<div><div>
<div>

When each class= div has a click event, we can take an event delegate,

Copy Code code as follows:

$ ("#content"). On ("click", "div", function () {
$ (this). CSS ("Color", "#ff5500");
});

7, the correct processing cycle

Loops are a time-consuming operation, and if you can use selectors to select elements directly, do not use loops to iterate through the elements.

The native method for and while of JavaScript is faster than each () of jquery. Therefore, priority should be given to the use of native methods.

8, reduce the generation of jquery objects

Generating the Query object generates the corresponding properties and methods, comparing resource consumption. So try to reduce the generation of jquery objects.

9, the scope of the variable

When a variable does not need to be called in more than one function, the variable should be placed inside the function, reducing the time it takes to find the code when it executes.

10. Postpone certain functions to $ (window). Load execution

$ (document). Ready does work, but it can be done when the page is rendered and other elements are not downloaded.

11, the combination of the script

Scripts are all loaded, and reducing the number of scripts can also improve efficiency.

12. Element encapsulation

When inserting a content into a node, you can first encapsulate the content and insert it.

Copy Code code as follows:

var content = "";
$ ("#head"). HTML (content);

The other is to do the compression of JS files.

As jquery continues to be used, more and more optimization methods will be found.