Before understanding redraw and return, we first get to know what time a page is loaded, what would happen?
When the page loads, generate a DOM tree, DOM Tree contains all of the pages that make label. Style Sheets (CSS style sheets) will generate a Style Rules. When the DOM Tree Style Rules and constructed with a Render Tree, for understanding Render Tree: Render Tree DOM Tree and the like, but Render Tree style can be recognized in the Render Tree, each node (node) has its own Style ( style), but not part of the hidden nodes for display or not contained in the Render Tree.
The figure is a page rendering in the browser (Webkit) process. Layout is a layout in which, when the page is loaded for the first time or when the need to change the layout Render Tree, arises reflux (reflow) / rearrangement (relayout). When a portion Render Tree (or all) of the node (node) because the scale size of the element, layout, display hidden and other changes, browser to re-render the portion or the entire page, the recalculation process page elements position and geometry, that is, to re-render the tree structure, a process called reflow (reflow) / rearranged (relayout). Each page reflux occurs at least once / rearrangement is the first time the page is loaded. When the page elements in the appearance or style just does not affect the layout is changed, such as changing the background color background-color, the process is redrawn.
Reflux / rearrangement (Reflow): When a part of the render tree nodes must be updated and the size change, part of the tree affected by the browser will fail to render and re-render the configuration tree.
Redraw (Repaint): change in appearance is an element of browser behavior triggered, the browser will be redrawn according to the new attribute of the element, the element presents a new look. Such as changing the background color of an element, text color, border color, etc.
| Factors reflux (reflow) / rearranged (relayout) of | Factors affecting redraw (replaint) of |
|---|---|
| Elements of layout and geometric properties will trigger reflow time change. 1. The initial page rendering; 2 add / remove DOM elements visible; 3 ----- targeting property change element positions and floating (position, float);. 4 to change the element size (width, height, inner and outer margins, borders, etc.) ----- box model associated attributes (height, padding, margin, display, border-width, min-height);. 5 change element content (text or images) (text-align, line-height, vertival -align, overflow, font-size, font-family, font-weight);. 6 changed window size;. 7 acquires element offsetWidth, offsetHeight, clientWidth, clientHeight, width, height, scrollTop, scrollHeight, requested the getComputedStyle () , or IE, currentStyle | Redraw triggered when elements in the page to update the appearance or style-related properties, such as: background, color, visibility, border-style, border-radius outline-color, cursor, text-decoration, box-shadow |
Do not necessarily need to redraw the rearrangement (such as changing colors), rearrangement will inevitably lead to redraw (such as changing the page position).
optimization:
Redraw and rearrangements have a certain influence on the performance of our browser, the browser will maintain a queue, all cause rearrangement redraw operations into the queue, and other operations in the queue to a certain number or to a certain time interval, the browser will flush the queue, perform a batch, so multiple rearrangement, become a rearrangement redraw redraw
Reduce reflow / the repaint:
(1) Do not modify the DOM one by one style. You can define a good css class, and then modify the DOM className.
(2) not to the attribute value in the DOM node as a loop variable in the loop.
(3) the use of fixed or position absoult for HTML elements of the animation, then modify their CSS will not reflow of.
(4) Do not use table layout. It may be small because of a small change will result in re-layout of the entire table. (Except for its internal table of elements, it may be necessary to compute node to determine its good attributes in the render tree, usually takes 3 times in the same time elements. This is why we want to avoid using the table to make the layout a reason .)
(5) Do not do query when the layout information changed (render queue will lead to force a refresh)
