First, what is redraw Repaint and rearrangement (reflow reflow)
Redraw: As part of the attribute element is changed, such as appearance, background, color, etc. does not cause layout changes, only the browser redrawn according to the new attribute of the element
, the element is called redraw take on a new look. Rearrangement (reflux): When all processes render tree because problems such as the size of the margin required change the DOM tree to recalculate some or
redrawing rearrangement is not necessarily required (such as changing the color), will inevitably lead to rearrangement redraw (such as changing page location)
Second, and causing rearrangements redraw Repaint (reflux reflow) properties
2.1 redraw Repaint of causing property
| Common redraw elements | ||||
|---|---|---|---|---|
| color | border-style | visibility | background | |
| text-decoration | background-image | background-position | background-repeat | |
| outline-color | outline | outline-style | border-radius | |
| outline-width | box-shadow | background-size | ||
2.2 induced rearrangements (reflux reflow) and scene properties
1. Add, delete visible dom 2. The change in the position of the element 3. Size change element (margins, padding, border thickness, width and height, and other geometric attributes) 4. page rendering initialization The browser window is resized
6. Set the style attributes
7. Change text size
8. Add / Delete style sheet
9. Activate pseudo-class, such as: hover
10. Operation class attribute
11. The change of content, (a user will write in the input box content)
| Common elements rearrangement | ||||
|---|---|---|---|---|
| width | height | padding | margin | |
| display | border-width | border | top | |
| position | font-size | float | text-align | |
| overflow-y | font-weight | overflow | left | |
| font-family | line-height | vertical-align | right | |
| clear | white-space | bottom | min-height | |
offsetTop |
offsetLeft |
offsetWidth |
offsetHeight |
|
scrollTop |
scrollLeft |
scrollWidth |
scrollHeight |
|
clientTop |
clientLeft |
clientWidth |
clientHeight |
|
getComputedStyle() |
(currentStyle in IE) |
|||
Third, how to reduce redraw (Repaint) and rearrangement (reflow)
(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)
(6) with an alternative top translate change
(7) with opacity replacement visibility (optimized redraw in separate layers)
-------------------------------------------------------------------------------------------------
Reprinted from: https://www.cnblogs.com/qing-5/p/11341196.html