30 good experiences on improving Web application 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 document. createElement/appendChild.
2. There is a problem with eval (), and the new function () 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. The code in with is completely unknown during compilation.
4. Use the for () loop instead of... In cycle. 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. Settry-catchDo not place statements outside the loop because exceptions rarely occur. Do not place them outside the loop to avoid executing them every time.
6. This is even mentioned 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';Execution speed is fasterfullName += '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 implement 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. For example, val1 <val2? Val1: val2; execution speed faster than Math. min (val1, val2);, similarly, 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) is less efficient than setTimeout (someFunc, 1000)
11. Do not use DOM for traversal. The DOM element queue obtained through the getElementsByTagName () method is dynamic. It may have been changed before you traverse it. 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 local variable range. 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 lower than for (var I = 0, loopLen = someArray. length; I <loopLen; I ++ ){...}.
15. Add Cache Control expiration and maximum survival time in 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 search, traversal, and DOM changes. Document. getElementsByTagName ('*'). The smaller the length value, the better.
23. Note the selector you are using. For exampleulUse jQuery ("ul> li") instead of jQuery ("ul li ")
24. When you switch the visibility of elements (display), remember that element.css ({display: none}) is faster than element. hide () and element. addClass ('myhiddenclass '). 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 must 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 algorithm. According to the CSS 2.1 technology, this method can output a row of table data.
30. Use the original JavaScript whenever possible. Restrict the use of JavaScript frameworks.