22: Suggestions on jquery performance optimization _ jquery

It is not uncommon to discuss jQuery and javascript performance. However, I plan to summarize some speed tips and some of my own suggestions in this article to improve your jQuery and javascript code. Good code will increase the speed. Quick rendering and response means a better user experience. First, keep in mind that jQuery is javascript. This means we should adopt the same encoding practices, style guides and best practices.

First of all, if you are a beginner in javascript, I suggest you read "24 JavaScript Best Practices for Beginners". This is a high-quality javascript tutorial. You 'd better read it before getting started with jQuery.

When you are about to use jQuery, I strongly recommend that you follow these guidelines:

1. cache Variables

DOM traversal is expensive, so we try to cache elements that will be reused.

The Code is as follows:

// Bad
H = $ ('# element'). height ();
(('{Element'{.css ('height', h-20 );

The Code is as follows:

// Suggestions
$ Element = $ ('# element ');
H = $ element. height ();
$Element.css ('height', h-20 );

2. Avoid global variables

JQuery is the same as javascript. In general, it is best to ensure that your variables are within the function scope.

The Code is as follows:

// Bad
$ Element = $ ('# element ');
H = $ element. height ();
$Element.css ('height', h-20 );

The Code is as follows:

// Suggestions
Var $ element = $ ('# element ');
Var h = $ element. height ();
$Element.css ('height', h-20 );

3. Use the Hungarian naming method

Add a $ prefix to the variable to identify the jQuery object.

The Code is as follows:

// Bad
Var first = $ ('# first ');
Var second = $ ('# second ');
Var value = $ first. val ();

The Code is as follows:

// Recommended-Add the $ prefix before the jQuery object
Var $ first = $ ('# first ');
Var $ second = $ ('# second '),
Var value = $ first. val ();

4. Use var chain (single var mode)

Merge multiple var statements into one statement. I suggest placing unassigned variables behind it.

The Code is as follows:

Var
$ First = $ ('# first '),
$ Second = $ ('# second '),
Value = $ first. val (),
K = 3,
Cookiestring = 'somecookiesplease ',
I,
J,
MyArray = {};

5. Use 'on'

In the new version of jQuery, the shorter on ("click") is used to replace functions such as click. In earlier versions, on () is bind (). Since jQuery 1.7, the preferred method for attaching event handlers to on. However, for consistency, you can simply use the on () method.

The Code is as follows:

// Bad
$ First. click (function (){
Define first.css ('border', '1px solid red ');
Define first.css ('color', 'blue ');
});

$ First. hover (function (){
Define first.css ('border', '1px solid red ');
})

The Code is as follows:

// Suggestions
$ First. on ('click', function (){
Define first.css ('border', '1px solid red ');
Define first.css ('color', 'blue ');
})

$ First. on ('hover ', function (){
Define first.css ('border', '1px solid red ');
})

6. Simplified javascript

In general, it is best to merge functions as much as possible.

The Code is as follows:

// Bad
$ First. click (function (){
Define first.css ('border', '1px solid red ');
Define first.css ('color', 'blue ');
});

The Code is as follows:

// Suggestions
$ First. on ('click', function (){
$First.css ({
'Border': '1px solid red ',
'Color': 'blue'
});
});

7. Chain Operations

The chain operation of jQuery implementation method is very easy. This is used below.

The Code is as follows:

// Bad
$Second.html (value );
$ Second. on ('click', function (){
Alert ('Hello everbody ');
});
$ Second. fadeIn ('slow ');
$ Second. animate ({height: '120px '}, 500 );

The Code is as follows:

// Suggestions
$Second.html (value );
$ Second. on ('click', function (){
Alert ('Hello everbody ');
}). FadeIn ('slow'). animate ({height: '120px '}, 500 );

8. Maintain code readability

While streamlining code and using the chain, it may make the code hard to read. Adding a thumbnail and a line feed can have a good effect.

The Code is as follows:

// Bad
$Second.html (value );
$ Second. on ('click', function (){
Alert ('Hello everbody ');
}). FadeIn ('slow'). animate ({height: '120px '}, 500 );

The Code is as follows:

// Suggestions
$Second.html (value );
$ Second
. On ('click', function () {alert ('Hello everybody ');})
. FadeIn ('slow ')
. Animate ({height: '120px '}, 500 );

9. Select short-circuit Evaluation

Short-circuit evaluate is a left-to-right evaluate expression, using the & (logical and) or | (logical or) operator.

The Code is as follows:

// Bad
Function initVar ($ myVar ){
If (! $ MyVar ){
$ MyVar = $ ('# selector ');
}
}

The Code is as follows:

// Suggestions
Function initVar ($ myVar ){
$ MyVar = $ myVar | $ ('# selector ');
}

10. Select shortcuts

One of the ways to streamline code is to use short-cut encoding.

[Code]
// Bad
If (collection. length> 0 ){..}

The Code is as follows:

// Suggestions
If (collection. length ){..}

11. Separation of elements in heavy operations

If you want to perform a large number of operations on DOM elements (consecutively setting multiple attributes or css styles), we recommend that you first separate the elements and then add them.

The Code is as follows:

// Bad
Var
$ Container = $ ("# container "),
$ ContainerLi = $ ("# container li "),
$ Element = null;

$ Element = $ containerLi. first ();
//... Many complex operations

The Code is as follows:

// Suggestions
Var
$ Container = $ ("# container "),
$ ContainerLi = $ container. find ("li "),
$ Element = null;

$ Element = $ containerLi. first (). detach ();
//... Many complex operations

$ Container. append ($ element );

12. memorizing skills

You may not have any experience in using jQuery methods. You must check the document. There may be a better or faster way to use it.

The Code is as follows:

// Bad
$ ('# Id'). data (key, value );

The Code is as follows:

// Recommended (efficient)
$. Data ('# id', key, value );

13. Use a subquery to cache the parent Element

As mentioned above, DOM traversal is an expensive operation. A typical practice is to cache parent elements and reuse them when selecting child elements.

The Code is as follows:

// Bad
Var
$ Container = $ ('# iner '),
$ ContainerLi = $ ('# container li '),
$ ContainerLiSpan = $ ('# container li span ');

The Code is as follows:

// Recommended (efficient)
Var
$ Container = $ ('# iner '),
$ ContainerLi = $ container. find ('lil '),
$ ContainerLiSpan = $ containerLi. find ('span ');

14. Avoid common Selector

Put the common selector in the descendant selector, and the performance is very bad.

The Code is as follows:

// Bad
$ ('. Iner> *');

The Code is as follows:

// Suggestions
$ ('. Iner'). children ();

15. Avoid implicit generic Selector

The common selector is sometimes implicit and is not easy to find.

The Code is as follows:

// Bad
$ ('. Someclass: radio ');

The Code is as follows:

// Suggestions
$ ('. Someclass input: radio ');

16. Optimized Selection Operator

For example, the id selector should be unique, so there is no need to add additional selector.

The Code is as follows:

// Bad
$ ('P # myid ');
$ ('P # footer a. mylink ');

The Code is as follows:

// Suggestions
$ ('# Myid ');
$ ('# Footer. myLink ');

17. Avoid Multiple ID delimiters

It is emphasized that ID delimiters should be unique and no additional delimiters need to be added, and multiple descendant ID delimiters are not required.

The Code is as follows:

// Bad
$ ('# Outer # inner ');

The Code is as follows:

// Suggestions
$ ('# Inner ');

18. Stick to the latest version

The new version is usually better: lighter and more efficient. Obviously, you need to consider the code compatibility you want to support. For example, version 2.0 does not support ie 6/7/8.

19. Discard the abandon Method

It is very important to pay attention to the obsolete methods of each new version and try to avoid using these methods.

The Code is as follows:

// Bad-the live has been deprecated
$ ('# Stuff'). live ('click', function (){
Console. log ('hooray ');
});

The Code is as follows:

// Suggestions
$ ('# Stuff'). on ('click', function (){
Console. log ('hooray ');
});
// Note: This may be inappropriate because live can be bound in real time, and delegate may be more suitable.

20. Use CDN

Google's CND ensures that the cache closest to the user is selected and responds quickly. (If you use Google CND, please search for the address by yourself. The address here cannot be used. We recommend that you use the CDN provided on the official jquery website ).

21. Combine jQuery and javascript native code if necessary

As mentioned above, jQuery is javascript, which means that what jQuery can do can also be done using native code. The readability and maintainability of native code (or vanilla) may be inferior to that of jQuery, and the code is longer. But it also means more efficient (usually closer to the lower-Layer Code, the lower the readability, the higher the performance, for example: Assembly, of course, more powerful talent is needed ). Remember that no framework can be smaller, lighter, and more efficient than the native code (Note: The test link has expired and you can search for the test code online ).

In view of the performance differences between vanilla and jQuery, I strongly suggest absorbing the essence of both, using (if possible) native code equivalent to jQuery.

22. Last piece of advice

Finally, I recorded this article to improve jQuery's performance and other good suggestions. If you want to study this topic in depth, you will find a lot of fun. Remember, jQuery is not an indispensable choice. Think about why you want to use it. DOM operation? Ajax? Template? Css animation? Or is the selection engine? Maybe javascript micro-framework or jQuery's customized version is a better choice.