High-performance JavaScript notes: optimizing the performance of Dom operations in browsers (2)

About the optimization of Dom operation performance in the browser, in the previous blog article titled Optimization of Dom operation performance in the browser (I) the impact of accessing and modifying DOM elements on performance and the optimization scheme have been described in. This time, let's talk aboutRedrawing and relayoutProblem.

After the browser downloads all HTML tags and their components (JavaScript, CSS, and images), the browser parses the file and creates two internal data structures:
1. DOM tree: indicates the structure of the page.
2. Render tree: shows how the DOM tree is displayed.

In the rendering tree, each Dom node (except hidden nodes) has at least one corresponding node. The node of the rendering tree is called a "box" and conforms to the box model defined by CSS-a box model with a padding, border, margin, and position). Once the DOM tree and rendering tree are constructed, the browser can display (draw) elements on the page.

When the geometric properties (width and height) of DOM elements change, the browser recalculates the geometric properties of the elements, and the geometric properties and positions of other elements may also be affected, the corresponding part of the rendering tree is invalid, and the browser has to reconstruct the rendering tree. This process is called re-layout. When the re-layout is complete, the browser will draw the affected part of the screen in a re-painting process. If the element's geometric attributes are not changed (for example, only the element's background is changed), the element layout is not affected. This process is called re-painting. Relayout may occur in the following cases:

1. Add or delete visible elements
2. Element location change
3. Element size change
4. Element Content Change
5. Browser window size changed

Calling some methods or accessing certain properties will also lead to re-layout. Because layout information needs to be calculated, the browser has to run the project to be changed in the rendering queue and re-layout it to return the correct value. When the following attributes or methods are used,It is best to cache them with local variables.

1. Offsettop, offsetleft, offsetwidth, and offsetheight
2. Scrolltop, scrollleft, scrollwidth, and scrollheight
3. Clienttop, clientleft, clientwidth, clientheight
4. Document. defaultview. getcomputedstyle () (the element attribute in IE is currentstyle)

Since re-painting and re-formatting will affect the performance, we should avoid the number of times that the situation occurs.

　　Modify style attributes

Consider the following column:

var el = docuemnt.getElementById("mydiv");el.style.borderLeft = "1px";el.style.margin = "5px";el.style.padding = "5px";

The following code can be optimized:

VaR El = document. getelementbyid ("mydiv" );el.style.css text = "; Border: 1px; margin: 5px; padding: 5px"; // note that there is a semicolon before it to avoid overwriting the previous Style

Batch modification of DOM elements

　　To modify the DOM element multiple times, follow these steps to reduce the number of re-painting and re-layout times:

1. Remove the DOM element from the document stream (causing relayout)
2. This element is modified multiple times (if the other two steps are performed, each modification will cause re-layout)
3. Bring the elements back to the document for display (causing re-layout)

There are two ways to remove DOM elements from the Document Stream:

1. Hide elements, modify them, and then display them.
2. Creates or clones a node, modifies it, And overwrites the original Dom element.

The following is a column description (update list ):

HTML code:

<ul id="mylist">    <li><a href="http://www.baidu.com">baidu</a></li>    <li><a href="http://www.google.com.hk">google</a></li></ul>

JavaScript code:

// The data var DATA = [{name: "cnblogs", URL: "http://www.cnblogs.com/"}, {name: "leolai", URL: "http://www.cnblogs.com/leolai/"}]; // create a common function to add data to the specified list. Function appenddatatolist (targetelement, data) {var A, Li, item; For (VAR I = 0, len = data. length; I <Len; I ++) {item = data [I]; A = document. createelement ("A");. src = item. URL;. appendchild (document. createtextnode (item. name); Li = document. createelement ("Li"); Li. appendchild (a); targetelement. appendchild (LI) ;}}// if you ignore the typographical structure, the simplest way to update the data to the list is as follows: var ul = document. getelementbyid ("mylist"); appenddatatolist (UL, data); // use this method, when each project in data is appended to ul, the re-layout will occur. // according to the optimization method mentioned above, the following code can be modified:
// Modify 1: Hide it first, then modify it, and display var ul = document. getelementbyid ("mylist"); ul. style. display = "NONE"; appenddatatolist (UL, data); ul. style. display = "Block"; // modify 2: one-time update using document fragments (recommended) var fragment = document. createdocumentfragment (); appenddatatolist (fragment, data); document. getelementbyid ("mylist "). appendchild (fragment); // modify 3: Clone, modify copy, overwrite var ul = document. getelementbyid ("mylist"); var clone = ul. clonenode (true); appenddatatolist (clone, data); ul. parentnode. replaceChild (clone, UL );

In addition, we often make some animation effects on webpages.Absolute positioning should be used for animation elements. Because absolute positioning does not exist in the Document Stream, its changes will not affect the page layout..

Also, if a large number of elements are used: hover reduces the response speed. This problem is more significant in IE8.