reflow 和 repaint

Browser parses the basic process

Browser parses the basic flow

reflow和repaint

reflow, the browser is calculated based on the place and the results will be determined on the basis of elements into a variety of styles.
repaint: After relfow complete, the browser according to the characteristics of each of these elements to draw again.

And reflow operation causes the repaint

The operation caused repaint

A change in the appearance of the elements, but does not change the layout of

1. visibility

2. outline

3. background color

Cause reflow of operation

1. Change the window size

2. Change the font

3. Add and delete style sheets

4. Changing content, such as user input text input box

5. Activation pseudo-class

6. Operating class attribute

7. DOM script operations

8. OffsetWidth computing and offsetHeight

9. Setting style properties

display: none trigger reflow, and visibility: hidden trigger repaint, because the position has not changed

To avoid and minimize the impact

1. Directly change the elements you want to change (avoided by acting on the child element of the parent element, but a direct role in the child element)

2. Yellow to avoid inline style

3. For animation elements, which set fixed or absolute position

4. Speed ​​tradeoff smooth, slow, frequently reflow

5. Avoid table layout

6. Js avoid css contains expressions (only IE)

How to determine the elements of reflow or repaint

Use chrome developer tools Timeline:
Timeline

References:

1. REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

2. Repaint, Reflow basic understanding and optimization (2)