Page redraw and reflow and optimization

The first step is to understand the specific process of page rendering:

1. The browser parses the acquired HTML code into 1 dom trees, each tag in the HTML is 1 nodes in the DOM tree, and the root node is our common Document object. Dom tree contains all the HTML tags, including display:none hidden, but also useful JS dynamically added elements and so on.

2. The browser parses all the styles (user-defined CSS and user-agent) into a style structure, and in the process of parsing, it removes the styles that the browser does not recognize, such as IE removes the style from the beginning of the-moz, and FF strips out the style of the _.

3. The DOM tree and the style structure are combined to construct the render tree, which is similar to Dom tree, but the difference is that the render tree recognizes the style, and each node in the render tree has its own style, and the render The tree does not contain hidden nodes (such as display:none nodes and head nodes) because these nodes are not used for rendering and are not affected by rendering, so they are not included in the render tree. Note that Visibility:hidden hidden elements are still included in the render tree, because Visibility:hidden affects the layout and occupies space. According to the CSS2 standard, each node in the render tree is called box dimensions, which understands that the page element is a box with padding, margins, borders, and positions.

4. Once the render tree is built, the browser can draw the page based on the render tree. Such as:

Reflow and Redraw

1. When part (or all) of the render tree needs to be rebuilt because of the size, layout, and concealment of the elements. This is called reflux (reflow). Each page needs at least one reflow, which is the first time the page loads. During reflow, the browser invalidates the affected part of the render tree and reconstructs the part of the render tree, and after the reflow is completed, the browser redraws the affected part into the screen, which becomes redrawn.

2. When some elements in the render tree need to update properties, these properties only affect the appearance, style of the element, without affecting the layout, such as Background-color. It is called redrawing.

Note: Reflow is bound to cause repainting, and repainting does not necessarily cause reflux. we need to understand that there is a high price to pay for a page to reflow.

When reflux occurs:

Reflow is required when page layout and Geometry properties change. Browser reflow occurs in the following situations:

1. Add or remove visible DOM elements;

2, the element position changes;

3. Element size change-margin, fill, border, width and height

4, changes in content-such as text changes or changes in the size of the image caused by the width and height of the calculated value change;

5. Initialization of page rendering;

6, browser window size change--resize event occurs;

Smart Browser

From the last instance code can see a few lines of simple JS code to cause 6 times around the reflow, redraw. And we also know that the return of the cost is not small, if every JS operation to go back to redraw, the browser may be unbearable. So many browsers will optimize these operations, the browser will maintain a queue, all will cause reflow, redraw operations into the queue, and so on the queue to a certain number of operations or to a certain time interval, the browser will flush the queue, a batch processing. This allows multiple reflow and repainting to become a reflow redraw.

While there are browser optimizations, sometimes some of the code we write may force the browser to flush the queue ahead of time, so that browser optimizations may not work. When you request some style information from the browser, the browser will flush the queue, for example:

1. OffsetTop, Offsetleft, offsetwidth, offsetheight

2. Scrolltop/left/width/height

3. Clienttop/left/width/height

4. Width,height

5. Request getComputedStyle (), or IE's currentstyle//This property represents the final calculated style, you can refer to Zhang Xin Xu's blog

When you request some of the properties above, the browser needs to flush the queue in order to give you the most accurate value, because there may be operations that affect these values in the queue. The browser forcibly refreshes the render queue, even if you get the layout and style information for the element regardless of the layout information that recently occurred or changed.

How to reduce reflow, redraw

Reducing reflow and redrawing is actually a need to reduce the action on the render tree (merging multiple DOM and style modifications), and reduce requests for some style information, making the best use of the browser's optimization strategy. Specific methods are:

1. Change the classname directly, if you change the style dynamically, use Csstext (consider a browser that is not optimized)

Bad writing var = 1;var top = 1;el.style.left = left + "px"; el.style.top = top + "px";//better notation el.classname + = "Classnam E1 "; Better writing El.style.cssText + = "Left:" + Left + "Px;top:" + top + "px;";

2. Allow the elements to be manipulated to be "processed offline" and updated together after processing

A) Use DocumentFragment for caching operations, triggering a reflow and redraw;

//bad notation (the anti-pattern in the pattern)varp, T;p= Document.createlement (' P '); t= Document.creattextnode (' Fist paragraph ');p. appendchild (t);d Ocument.body.appendChild (p); //will cause a returnP= Document.createlement (' P '); t= Document.creattextnode (' second paragraph ');p. appendchild (t);d Ocument.body.appendChild (p); //will cause another return .//good wording.varp, T, Frag;frag=document.creatdocumentfragment ();p= Document.createlement (' P '); t= Document.creattextnode (' Fist paragraph ');p. appendchild (t); Farg.appendchild (p);p= Document.createlement (' P '); t= Document.creattextnode (' second paragraph ');p. appendchild (t); Farg.appendchild (P);d ocument.body.appendChild (Frag); //compared to the previous method, this only causes a return, if there are many such operations on the page, the use of the document will be a lot of promotion

b) using Display:none technology, only two reflux and repainting are triggered; (just reduce the number of redraw and reflow, Display:none will cause repainting and reflow, relatively,Visibility:hidden will only cause repainting)

c) Use CloneNode (True or false) and replacechild technology to trigger a reflow and redraw;

// Create a clone image var oldNode = document.getElementById (' target '),      = Oldnode.clonenode (true);   // Deep Copy //    working with cloned objects .... // after completion oldNode.parentNode.replaceChild (Clone,oldnode);

3. Do not frequently access the properties that will cause the browser flush queue, if you do want to access, take advantage of the cache

//  Bad  for  = el.offsetleft + 5 + "px"= el.offsettop + 5 + "px"//  This writes well dot var left   = == = = + + + = left + "px" = top + "px";}

4. Move elements out of the animation stream to reduce the size of the returned render tree

This article has a reference to self-http://www.css88.com/archives/4996, there are some of their own understanding, if there is no welcome to shoot Bricks

Page redraw and reflow and optimization