Home > Developer > Web Develop
Based on the online review of the problem of optimization, according to their own understanding, simple collation. For your reference only in the area of optimization
In web development, the browser is manipulated through the DOM to interact with the HTML, and DOM operations are expensive because it causes the browser to perform reflux (reflow) operations. But we are inevitably doing DOM operations, so choose to reduce DOM operations as much as possible to optimize.
Reflow (refers to the process by which a browser recalculates the position and geometry of elements in a document in order to re-render some or all of the documents. Therefore, the change in the position of the element caused by the operation will cause reflux.
The condition that causes reflux to occur:
User actions, such as changing the browser size, changing the browser font size, etc.
When you move the DOM's position, or animate it.
When you make additions or deletions to a DOM node or change content.
When you modify a CSS style, the position of the element changes. Note: Change Background-color;color; does not cause reflux
When you modify the default font for a Web page.
Dynamic set style, etc.
Workaround:
1.dom is not suitable for table layout and should not be used.
2. Offline DOM operation, after modification and then online
2.1clone a DOM node into memory, after the change, and the online exchange. One reflow Redraw
2.2 Through Display:none, can be arbitrarily modified, and then displayed. Trigger Reflow Redraw two times
2.3 Using elements such as documentfragment or div to cache operations, first add all the elements to add to the 1 div (this div is also new),
Finally, the DIV is append into the body. Only causes Reflow to redraw once
3. Modify CSS style as far as possible to create a class, classname pre-defined style, if it is dynamic change, should be finished (csstext);
4. Because the reflux is top-down, so below, we modify the information on the last side of the overall impact of less.
(Reflow is bound to cause repainting, and repainting does not necessarily cause reflux.) The reflow of an element results in the subsequent reflow of all its child elements and the ancestor elements immediately following it in the DOM.
Two. String concatenation + + is inefficient, creating an array and finally returning with Arr.join (").
Three. In the For loop, the array is cached and then placed in the local variable, which reduces the computer query length for (I=0;len = x.length,i<len,i++)
Four. Access to local variables is faster than global variables
Five. Try to work with JSON format to create objects instead of Var Obj=new object () method
Six. When looping many times, use SetInterval () and use less settimeout (), which is because settimeout () re-creates a timer each time it runs.
Seven. For large JS objects, because the time and space overhead are relatively large, you should consider using caching as much as possible.
Eight. Optimization js file to the non-affected JS into a file, reduce the request.
Nine. Compressing JS files
10. Reduce page redraw, save by creating an array, and finally add the array to the page. Although it seems to be more written, performance has improved a lot.
<body><div id= "Demo" ></div><input type= "button" value= "Low Efficiency" onclick= "func1 ()"/><input Type= "button" value= "High Efficiency" onclick= "Func2 ()"/><script type= "Text/javascript" >varstr = "<div> This is a test string </div><div> this is a test string </div><div> this is a test string </div><div > This is a test string </div><div> this is a test string </div> "//long time to run the entire code, low efficiencyfunctionfunc1 () {varobj = document.getElementById ("Demo"); for(vari = 0; I < 100; i++) {obj.innerhtml+ = str +i; }}//High-efficiencyfunctionFunc2 () {varobj = document.getElementById ("Demo"); varStart =NewDate (). GetTime (); vararr = []; for(vari = 0; I < 100; i++) {Arr[i]= str +i; } obj.innerhtml= Arr.join ("");}</script></body>
JS optimization aspect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
