Explore the mysteries of efficient jquery

Good code can lead to speed improvements. Fast rendering and responsiveness means a better user experience.
First, keep in mind that jquery is JavaScript. This means that we should take the same coding conventions, style guides and best practices.

First of all, if you're a novice JavaScript, I suggest you read the 24 best practices for JavaScript beginners , a high-quality JavaScript tutorial that you'd better read before contacting jquery.

When you are ready to use jquery, I strongly recommend that you follow these guidelines:

Cache variables
DOM traversal is expensive, so try to cache the elements that will be reused.

1. Bad
3. H = $ (' #element '). Height ();
4. $ (' #element '). CSS (' height ', h-20);
6. Suggestions
8. $element = $ (' #element ');
9. h = $element. Height ();
10. $element. css (' height ', h-20);

Copy Code

Avoid global variables
jquery, like JavaScript, is generally preferable to ensure that your variables are within the scope of the function.

1. Bad
3. $element = $ (' #element ');
4. h = $element. Height ();
5. $element. css (' height ', h-20);
7. Suggestions
9. var $element = $ (' #element ');
10. var h = $element. Height ();
11. $element. css (' height ', h-20);

Copy Code

Using the Hungarian nomenclature
Prefix the variable with $ to make it easy to identify the jquery object.

1. Bad
3. var first = $ (' #first ');
4. var second = $ (' #second ');
5. var value = $first. val ();
7. Recommendation-add $ prefix to jquery objects
9. var $first = $ (' #first ');
10. var $second = $ (' #second '),
11. var value = $first. val ();

Copy Code

Using the var chain (single var mode)
To combine multiple VAR statements into one statement, I recommend that you put unassigned variables behind.

1. Var
2. $first = $ (' #first '),
3. $second = $ (' #second '),
4. Value = $first. val (),
5. K = 3,
6. cookiestring = ' Somecookiesplease ',
7. I
8. J
9. MyArray = {};

Copy Code

Please use ' on '
In the new version of jquery, Shorter on ("click") is used to replace functions like Click (). In the previous version, on () is bind (). The preferred method of on () attaching event handlers since the jquery 1.7 release. However, for consistency reasons, you can simply use the on () method.

1. Bad
3. $first. Click (function () {
4. $first. CSS (' border ', ' 1px solid red ');
5. $first. CSS (' Color ', ' blue ');
6. });
8. $first. Hover (function () {
9. $first. CSS (' border ', ' 1px solid red ');
10. })
12. Suggestions
13. $first. On (' click ', function () {
14. $first. CSS (' border ', ' 1px solid red ');
15. $first. CSS (' Color ', ' blue ');
16. })
18. $first. On (' hover ', function () {
19. $first. CSS (' border ', ' 1px solid red ');
20. })

Copy Code

Thin JavaScript
In general, it is best to combine functions as much as possible.

1. Bad
3. $first. Click (function () {
4. $first. CSS (' border ', ' 1px solid red ');
5. $first. CSS (' Color ', ' blue ');
6. });
8. Suggestions
10. $first. On (' click ', function () {
11. $first. CSS ({
12. ' Border ': ' 1px solid red ',
13. ' Color ': ' Blue '
14. });
15. });

Copy Code

Chained operation
The chained operation of the jquery implementation method is very easy. Use this point below.

1. Bad
3. $second. HTML (value);
4. $second. On (' click ', function () {
5. Alert (' Hello everybody ');
6. });
7. $second. FadeIn (' slow ');
8. $second. Animate ({height: ' 120px '},500);
10. Suggestions
12. $second. HTML (value);
13. $second. On (' click ', function () {
14. Alert (' Hello everybody ');
15. }). FadeIn (' slow '). Animate ({height: ' 120px '},500);

Copy Code

Maintain the readability of your code
Along with the streamlining of code and the use of chaining, the code can be difficult to read. Adding a shrink and line break can be a good result.

1. Bad
3. $second. HTML (value);
4. $second. On (' click ', function () {
5. Alert (' Hello everybody ');
6. }). FadeIn (' slow '). Animate ({height: ' 120px '},500);
8. Suggestions
10. $second. HTML (value);
11. $second
12. . On (' click ', function () {alert (' Hello Everybody ');})
13. . FadeIn (' slow ')
14. . Animate ({height: ' 120px '},500);

Copy Code

Select short-Circuit evaluation
A short-circuit evaluation is an expression that evaluates from left to right, with && (logical AND) or | | (logical OR) operators.

1. Bad
3. function Initvar ($myVar) {
4. if (! $myVar) {
5. $myVar = $ (' #selector ');
6. }
7. }
9. Suggestions
11. function Initvar ($myVar) {
12. $myVar = $myVar | | $ (' #selector ');
13. }

Copy Code

Choose a shortcut
One way to streamline your code is to take advantage of coding shortcuts.

1. Bad
3. if (Collection.length > 0) {..}
5. Suggestions
7. if (collection.length) {..}

Copy Code

Separation of elements in heavy operations
If you are going to do a lot of work on DOM elements (setting multiple properties or CSS styles consecutively), it is recommended that you first detach the elements and then add them.

1. Bad
3. Var
4. $container = $ ("#container"),
5. $containerLi = $ ("#container Li"),
6. $element = null;
8. $element = $containerLi. First ();
9. //... Many complex operations
11. Better
13. Var
14. $container = $ ("#container"),
15. $containerLi = $container. Find ("Li"),
16. $element = null;
18. $element = $containerLi. First (). Detach ();
19. //... Many complex operations
21. $container. Append ($element);

Copy Code

Memorizing skills
You may have a lack of experience with the methods in jquery, be sure to review the documentation, and there may be a better or faster way to use it.

1. Bad
3. $ (' #id '). Data (Key,value);
5. Recommended (efficient)
7. $.data (' #id ', key,value);

Copy Code

Using the parent element of a subquery cache
As mentioned earlier, Dom traversal is an expensive operation. A typical practice is to cache the parent element and reuse those cached elements when the child element is selected.

1. Bad
3. Var
4. $container = $ (' #container '),
5. $containerLi = $ (' #container Li '),
6. $containerLiSpan = $ (' #container Li span ');
8. Recommended (efficient)
10. Var
11. $container = $ (' #container '),
12. $containerLi = $container. Find (' Li '),
13. $containerLiSpan = $containerLi. Find (' span ');

Copy Code

Avoid Universal selectors
It is very bad to put a generic selector in a descendant selector.

1. Bad
3. $ ('. Container > * ');
5. Suggestions
7. $ ('. Container '). Children ();

Copy Code

Avoid implicit universal selectors
Universal selectors are sometimes implicit and not easily discoverable.

1. Bad
3. $ ('. Someclass:radio ');
5. Suggestions
7. $ ('. SomeClass input:radio ');

Copy Code

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

1. Bad
3. $ (' Div#myid ');
4. $ (' Div#footer a.mylink ');
6. Suggestions
7. $ (' #myid ');
8. $ (' #footer. MyLink ');

Copy Code

Avoid multiple ID selectors in this emphasis, the ID selector should be unique, no additional selectors need to be added, and more than one descendant ID selector is required.

1. Bad
3. $ (' #outer #inner ');
5. Suggestions
7. $ (' #inner ');

Copy Code

Stick to the latest version
The new version is usually better: more lightweight and more efficient. Obviously, you need to consider the compatibility of the code you want to support. For example, the 2.0 version does not support IE 6/7/8. It is important to discard deprecated methods that focus on each new version and avoid using them as much as possible.

1. Bad
3. $ (' #outer #inner ');
5. Suggestions
7. $ (' #inner ');

Copy Code

Leveraging CDN
Google's CND ensures that the most recent cache is selected from the user and responds quickly. (Use Google CND, please search the address, where the address can not be used, recommended by the jquery website CDN).

Combine jquery and JavaScript native code if necessary
As mentioned above, jquery is JavaScript, which means that what you can do with jquery can also be done using native code. Native code (or vanilla) may be less readable and maintainable than jquery, and the code is longer. But it also means more efficient (often closer to lower-level code readability and higher performance, for example: compilation, which of course requires more powerful talent). Keep in mind that no framework can be smaller, lighter, and more efficient than native code (note: The test link is invalid and the test code can be searched online). Given the performance differences between vanilla and jquery, it is highly recommended to absorb the essence of both, using (possibly) and jquery equivalent native code .

Explore the mysteries of efficient jquery