Jquery performance optimization skills (1)

From: http://ryxxlong.javaeye.com/blog/622460

 

This article reference: http://www.blueidea.com/tech/web/2009/6737.asp (this article made a lot of modifications)

Http://www.artzstudio.com/2009/04/jquery-performance-rules)

Reference: http://blog.benhuoer.com/posts/10-tips-for-jquery-performance.html

Intermediate jquery Performance indicators and tuning: http://www.ibm.com/developerworks/cn/web/wa-aj-advjquery? S_tact = 105agx52 & s_cmp = tec-yesky # resources we strongly recommend that you read this articleArticle

Although jquery has excellent performance in many JS class libraries, it is not developed using native JavaScript, and performance issues still need to be paid attention. the following are some tips for improving jquery performance. I hope to help you: (The jquery version used in the test is 1.3.2)

1. Use the latest version of jquery
2. Merge and minimize scripts
3. Search by ID as much as possible, instead of class
4. Specify the front and back text for the selector
5. Cache jquery objects
6. Use subquery
7. Restrict direct Dom operations
8. Bubble
9. Clear invalid Query
10. Postponed to $ (window). Load

1. Use the latest version of jquery

Jquery has been in constant development and improvement processes. Jonh and his team are constantly researching and improvingProgramA New Method for performance.

2. Merge and minimize script files

Most browsers cannot process multiple script files at the same time, so the loading time is also extended. Considering that these scripts are loaded on every page of your website, you should consider placing them in a single file and then using compression tools (such as Dean Edwards) to minimize them. Smaller files will undoubtedly increase the loading speed. JavaScript and CSS compression are designed to reduce the number of bytes transmitted while maintaining the execution performance of the script (you can reduce the size of the original file or use gzip. Most product-level network servers use gzip as part of the HTTP protocol ). -Imported from Yui compressor, oneJquery official recommendation.

3. Search as many IDS as possible, instead of class

In jqueryCodeThe two common search technologies in are searching by element ID and searching by element class. Before using the Javascript library of conventional JavaScript, it is quite simple to search for page elements by ID. AvailableGetelementbyid ()Method to quickly find elements. However, if there is no JavaScript library, it will be more difficult to find the class. If necessary, we can also help to search by encoding in its ID. When using jquery, the search class is as simple as the ID on the search page, so the two searches seem interchangeable. However, this is not the case. Searching by ID is much faster than searching by class. When you search by ID, jquery actually only uses the built-inGetelementbyid ()Method, but when searching through the class, you must traverse all the elements on the page to find matching items. Obviously, when the page is larger and more complex, searching by class will lead to slow response, and searching by ID will not slow down as the page grows. The fastest selector in jquery is the ID selector because it comes directly from the getelementbyid () method of JavaScript.

For example, there is an HTML code:

HTML code

 
   
   
 
    
    
 & lt; Div id =" content "& gt; 
    
    
 & lt; form method = "Post" Action = "#" & gt; 
    
    
 & lt; H2 & gt; Traffic Signals & lt;/H2 & gt; 
    
    
 & lt; Ul id = "traffic_light" & gt; 
    
    
 & lt; Li & gt; & lt; input type = "radio" class = "on" name = "light" value = "red"/& gt; & nbsp; Red & lt;/Li & gt; 
    
    
 & lt; Li & gt; & lt; input type = "radio" class = "off" name = "light" value = "yellow"/& gt; & nbsp; yellow & lt;/Li & gt; 
    
    
 & lt; Li & gt; & lt; input type = "radio" class = "off" name = "light" value = "green"/& gt; & nbsp; green & lt;/Li & gt; 
    
    
 & lt;/UL & gt; 
    
    
 & lt; input class = "button" id = "traffic_button" type = "Submit" value = "go"/& gt; 
    
    
 & lt;/Form & gt; 
    
    
 & lt;/Div & gt; 
 
   
   
 

If the following selector is used, it is inefficient.

JS Code

<Li> var & nbsp; traffic_button & nbsp ;=& nbsp ;$ (". Button"); & nbsp; </LI>

Because the button already has an ID, we can directly use the ID selector. As follows:

JS Code

<Li> var & nbsp; traffic_button & nbsp ;=& nbsp ;$ ("# traffic_button"); & nbsp; </LI>

I conducted a simple test on the above two methods. The test code is as follows:

JS Code

<Ol> <li> & lt; script & nbsp; type = "text/JavaScript" & gt; & nbsp; <li> & nbsp; & nbsp; $ (function () & nbsp ;{& nbsp; & nbsp; <li> var & nbsp; starttime & nbsp ;=& nbsp; & nbsp; new & nbsp; Date (). getmilliseconds (); & nbsp; <li> for (VAR & nbsp; I & nbsp ;=& nbsp; 0; & nbsp; I & nbsp; & lt; & nbsp; 10000; & nbsp; I ++ & nbsp;) {& nbsp; <li> var & nbsp; traffic_button & nbsp ;=& nbsp; $ (". button "); & nbsp; <li> // & nbsp; var & nbsp; traffic_button & nbsp ;=& nbsp ;$ (" # traffic_button "); <li> & nbsp; & nbsp ;}& nbsp; & nbsp; <li> var & nbsp; endtime & nbsp ;=& nbsp; New & nbsp; Date (). getmilliseconds (); & nbsp; <li> & nbsp; alert (endtime & nbsp;-& nbsp; starttime); & nbsp; <li> & nbsp;}); & nbsp; & nbsp; <li> & nbsp; & lt;/script & gt; & nbsp; </LI> </OL>

The results of Multiple tests on the first selector are as follows: firefox3.5.8: 650 Ms IE8: 2200 Ms

The results of Multiple tests on the second selector are as follows: firefox3.5.8: 200 ms IE8: 1500 Ms

The data obtained above indicates that searching by ID is much faster than searching by class. How does this affect jquery code? Remember these tips when writing a search: If you can select both Class and ID, you usually need to select ID. If you need to search for some elements in your code, you must assign IDs to them.

Of course, this is only for a single element. If you need to select multiple elements, this will inevitably involve Dom traversal and loops. To improve performance, we recommend that you use for instead of each. Native functions are always faster than helper components. If you need to traverse objects (such as JSON objects received remotely), You 'd betterRewriteIf your (JSON) object is an array, it is easier to process the array cyclically.

The following is the test code:

JS Code

2. <SCRIPT type = "text/JavaScript">
4. $ (Function (){
6. VaR array = new array ();
8. For (VAR I = 0; I <10000; I ++ ){
10. Array [I] = I;
12. }
14. VaR starttime = new date ();
16. VaR L = array. length;
18. VaR STR = "";
20. For (var j = 0; j <L; j ++ ){
22. STR + = array [J];
24. }
26. // $. Each (array, function (I, field ){
28. // STR + = field. value;
30. //})
34. VaR endtime = new date ();
36. Alert (endtime-starttime );
38. });
40. </SCRIPT>

The results of Multiple tests on the for loop are as follows: firefox3.5.8: 3 ms IE8: 15 ms

The results of Multiple tests on each are as follows: firefox3.5.8: 30 ms IE8: 30 ms

4.Specify the front and back text for the selector (Provide as much search information as possible)

Jquery's reference document says:

The text passed to the original Dom node of jquery () (if nothing is passed, the text is the entire document ).

The purpose is to achieve more accurate query together with the selector.

Therefore, if you must use the class to specify the target, at least specify the context for the selector to avoid jquery's effort to traverse the entire DOM document.

In jquery, the second fastest selector is the tag selector (for example, $ ("head ")). Because it comes from the native getelementsbytagname () method. This is not surprising after considering the underlying JavaScript code. By providing the element tag, the number of search elements matching the class parameter is greatly reduced, thus improving the search performance to be equivalent to the ID Search in this example. Developers cannot be lazy when writing jquery selection methods, although jquery's simplicity can lead to laziness. This helps you relax your vigilance. The search mechanism becomes so simple that we tend to enter only one piece of information. However, you should always enter as much information as possible, especially known information.

Continue to read the HTML code.

For example, you need to select a red-green Single-stick,

You can use a tag name to restrict (modify) Class (and do not forget the nearest ID:

JS Code

<Li> var & nbsp; active_light & nbsp ;=& nbsp ;$ ('# traffic_light & nbsp; input. on '); & nbsp; </LI>

Note: In jquery, the class is the slowest selector. in IE browser, it will traverse all DOM nodes regardless of where it is used.The tag. Class method has better performance than the. Class Method in IE. However, in Firefox, it is lower than the direct. Class method. In Google's browser, the two types are similar.

When using tags to modify the class, we need to pay attention to the following points:

(1) do not use tags to modify the ID, as shown below:

JS Code

1. VaR content = $ ("Div # Content ");

In this way, the selector first traverses all DIV elements and then matches the # content.

The following is my test result:

The code for testing the HTM is as follows. I copied the DIV tag many times:

HTML code

2. <Div class = "Demo" id = "Demo">
4. <Div>
6. <Form method = "Post" Action = "#">
8. <H2> traffic signals </H2>
10. </Form>
12. </Div>
14. <Div id = "content">
16. <Form method = "Post" Action = "#">
18. <H2> traffic signals </H2>
20. <Ul id = "traffic_light">
22. <Li> <input type = "radio" class = "on" name = "light" value = "red"/> Red </LI>
24. <Li> <input type = "radio" class = "off" name = "light" value = "yellow"/> yellow </LI>
26. <Li> <input type = "radio" class = "off" name = "light" value = "green"/> green </LI>
28. </Ul>
30. <Input class = "button" id = "traffic_button" type = "Submit" value = "go"/>
32. </Form>
34. </Div>
36. <Div>
38. <Form method = "Post" Action = "#">
40. <H2> traffic signals </H2>
42. <Ul id = "traffic_light">
44. <Li> <input type = "radio" class = "on" name = "light" value = "red"/> Red </LI>
46. <Li> <input type = "radio" class = "off" name = "light" value = "yellow"/> yellow </LI>
48. <Li> <input type = "radio" class = "off" name = "light" value = "green"/> green </LI>
50. </Ul>
52. <Input class = "button" id = "traffic_button1" type = "Submit" value = "go"/>
54. </Form>
56. </Div>
58. <Div>
60. <Form method = "Post" Action = "#">
62. <H2> traffic signals </H2>
64. </Form>
66. </Div>
68. <Div>
70. <Form method = "Post" Action = "#">
72. <H2> traffic signals </H2>
74. </Form>
76. </Div>
78. <Div>
80. <Form method = "Post" Action = "#">
82. <H2> traffic signals </H2>
84. </Form>
86. </Div>
88. </Div> <! -- End demo-description -->

The JS Code is as follows:

JS Code

1. <SCRIPT type = "text/JavaScript">
2. $ (Function (){
3. VaR starttime = new date ();
4. For (VAR I = 0; I <10000; I ++ ){
5. VaR content = $ ("Div # Content ");
6. // Var content = $ ("# Content ");
7. }
8. VaR endtime = new date ();
9. Alert (endtime-starttime );
10. });
11. </SCRIPT>

The results of Multiple tests on the first selector are as follows: firefox3.5.8: 610 Ms IE8: 1650 Ms

The results of Multiple tests on the second selector are as follows: firefox3.5.8: 175 Ms IE8: 1220 Ms

(2) Modifying ID with ID is also a perfect addition:, as shown below:

JS Code

1. VaR content = $ ("# content # traffic_button ");

Perform the following tests:

The tested HTML code is the code above. JS Code as follows:

JS Code

1. <SCRIPT type = "text/JavaScript">
2. $ (Function (){
3. VaR starttime = new date ();
4. For (VAR I = 0; I <10000; I ++ ){
5. VaR content = $ ("# traffic_button ");
6. // Var content = $ ("# content # traffic_button ");
7. }
8. VaR endtime = new date ();
9. Alert (endtime-starttime );
10. });
11. </SCRIPT>

The results of Multiple tests on the first selector are as follows: firefox3.5.8: 185 Ms IE8: 1205 Ms

The results of Multiple tests on the second selector are as follows: firefox3.5.8: 655 Ms IE8: 1650 Ms

From the test results, we can see that when ID is used to modify the ID for selection, the search element process efficiency is basically not improved, but can be reduced.

(3) If the attribute selector is used, use tags as much as possible, as shown below:

JS Code

1. $ ('P [ROW = "c3221" comment '{.html (); instead of this: $ ('[ROW = "c3221" comment '{.html ();

From the test results above, JavaScript (jquery) performance is affected. In addition to the Code itself, another important aspect is the browser used to run JavaScript. each Browser contains a JavaScript engine, that is, the local code used to parse and execute JavaScript code and process web application pages. Therefore, the performance of JavaScript is heavily dependent on the browser used by the client. According to experienced people, the test results are as follows:The browser has nine times the impact on the performance of the Javascript library.Another important conclusion is that Google Chrome is the fastest JavaScript Engine, followed by Firefox and Safari, While IE (especially IE6, which is the fastest parsing speed) is the slowest JavaScript Engine.