30 good experiences in improving web program execution efficiency

1. Avoid using dom as much as possible. When Dom needs to be used repeatedly, the reference to Dom should be saved to the local JavaScript variable before use. Use the innerhtml setting method to replace the document. createelement/appendchild () method.

 

2. There is a problem with eval (). The new fuction () constructor is also. Try to avoid using them.

 

3. The with statement is denied. It causes you to search for such a namespace When referencing this variable.CodeIt is completely unknown during the compilation period.

 

4. Use the for () loop instead of... In loop. Because... Before the in loop starts, the script engine needs to create a list containing all the cyclic attributes and check the list once more.

 

5. Try to put the try-catch statement out of the loop instead of in the loop. Because exceptions rarely occur, put them out to avoid executing them every time.

 

6. I have even mentioned this in the Bible-not global. The lifecycle of a global variable runs through the lifecycle of the script, and the existence range of the local variable disappears with the destruction of the local namespace. When a global variable is referenced in a function or elsewhere, the script engine needs to search for the entire global namespace.

 

7. fullname + = 'john'; fullname + = 'holdings '; the execution speed is faster than fullname + = 'john' + 'holdings ';

 

8. If you need to connect multiple strings, it is best to make them into an array and then call the join () method to perform this operation. This method is particularly effective when generating HTML fragments.

 

9. For simple tasks, it is best to use basic operations instead of function calls.

Example: val1 <val2? Val1: val2; execution speed faster than math. Min (val1, val2 );

Similar:Myarr. Push (newele); slower than myarr [myarr. Length] = newele;

 

10. Passing a function reference as a parameter to setTimeout () and setinterval () is better than passing a function name as a string parameter (hard encoding ).

For example:SetTimeout ("somefunc ()", 1000) execution efficiency is slower than setTimeout (somefunc, 1000).

 

11. Avoid Dom operations when performing traversal. The Dom element queues obtained through methods such as getelementsbytagname () are dynamic. It is possible that the DOM element queue has been changed before it is traversed. This may lead to an endless loop.

 

12. When you perform repeated operations on Object members (attributes or methods), you must first store references to them.

For example:VaR gettags = Document. getelementsbytagname; gettags ('div ');

 

13. In any code segment, a local variable reference is stored outside the scope of the local variable. For example:
Function Foo (ARR ){
VaR A = 'something ';

// Variable 'A' is an out-of-range variable for the following section. The reference of this variable is useful in many cases.
For (VAR I = 0, j = A, looplen = arr. length; I <looplen; I ++ ){
// Do something
}
}

 

14. For (VAR I = 0; I <somearray. length; I ++ ){...} The execution efficiency is slower:

For (VAR I = 0, looplen = somearray. length; I <looplen; I ++ ){...}.

 

15. Add Cache Control expiration and maximum survival time tags to the HTTP header information.

 

16. Optimize CSS. Use the <link> method instead of the @ import method.

Please refer to this excellent document http://www.slideshare.net/stubbornella/object-oriented-css

 

17. Use CSS technology to optimize image resources.

 

18. Use gzip to compress. js and. CSS files. If you are using Apache, set the compression method in. htaccess. Your HTML, XML, and JSON will also be compressed.

Addoutputfilterbytype deflate text/HTML text/CSS text/plain text/XML

Application/X-JavaScript Application/JSON

 

19. use JavaScript compression tools. In addition to using Yui and jsmin, you can also try Google closure http://closure-compiler.appspot.com/home (thanks to James Westgate, a reader).

 

20. Optimize various resources on each page and split them into subdomains so that they can be downloaded in parallel.

See:Http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

 

21. Place the CSS style sheet at the top of the page to facilitate resolution by browsers including IE.

 

22. Try to keep the DOM structure as simple as possible. The volume of Dom affects the efficiency of related operations, such as searching, traversing, and Dom changes.

Document. getelementsbytagname ('*'). The smaller the length value, the better.

 

23. Pay attention to the selector you are using.

For example:If you want to obtain a direct sub-element under ul, use jquery ("Ul> li") instead of jquery ("Ul li ").

 

24. when you switch the visibility of elements (Display), remember: element.css ({display: None}) is faster than element. hide () and element. addclass ('mydendenclass '). Unless in a loop, I select element. addclass ('myhiddenclass'), which will make the code more concise-do not use inline CSS and JavaScript.

 

25. After using the reference variable for Dom, you should set it to null.

 

26. When Ajax is used, the get execution efficiency is higher than that of post. Therefore, try to use the get method.

Note that IE only allows you to transmit 2 k Data with get.

 

27. Use script animation with caution. Without hardware support, the animation will be executed very slowly. Try to avoid animation effects that have no practical value.

 

28. If your background-image container for this image is too small, avoid using background-repeat. If your background image needs to be filled back and forth many times to fill the background, it is unwise to set the background-repeat attribute to background-image, repeat-X, or repeat-y to fill the background, this filling method is very inefficient. You should try to use a large enough image for background-image and use background-repeat: No-repeat.

 

29. Do not use <Table> for layout. <Table> You need to draw it multiple times before the browser completely draws it. In Dom, <Table> is a rare element that affects the Display Effect of the previous output. For Table data, you can use table-layout: fixed;, which is a more effective reality.AlgorithmAccording to the CSS 2.1 technology, this method can output a row in a table.

 

30. Try to use the original JavaScript as much as possible. Restrict the use of JavaScript frameworks.

Strongly recommended: understanding of 30 good web application execution Efficiency Improvement experiences

 

Source: http://www.aqee.net/2010/06/28/30-best-practices-to-boost-your-web-application-performance/