** Brief: ** Reflow and Repaint can significantly affect web performance, especially on mobile pages, throughout the browser rendering process (page initialization, user behavior changing interface style, animation changing interface style, etc.). So we need to keep reflow and Repaint to a minimum in our page design.

What are reflow and Repaint

Reflow: For example, if a child element style changes that directly affects its parent element and traces back many of its ancestors (including its siblings), the browser needs to re-render all elements associated with the child element.

Reflow: Almost unavoidable. Some of the effects currently present in the interface, such as the collapse and expansion of tree directories (essentially the display and hiding of elements), will cause reflow in the browser. Mouse slide, click… As long as these behaviors cause changes in the space area, positioning mode, margin and other attributes of some elements on the page, it will cause it to be inside, around or even the whole page to be re-colored. It is often impossible to predict which parts of the code the browser will reflow, and they all affect each other.

  • Width/height/border/margin/padding changes, such as width = 778 px;
  • Animation, :hover and other pseudo-classes caused by changes in the expression of elements, display=none caused page backflow;
  • AppendChild and other DOM elements;
  • Font class style modification;
  • Some of the background changes will only trigger repaint after being optimized by the browser manufacturer. Of course, Internet Explorer does not need to consider this.
  • Scroll page, this is inevitable;
  • Resize page, the desktop version for browser size zoom, mobile, have not played with the drag application, resize application window size multi-window operating system.
  • Read the attributes of an element (this is unintelligible, but technologists say so, so consider it a theorem) : Read the elements of certain attributes (offsetLeft and offsetTop, offsetHeight, offsetWidth, scrollTop/Left/Width/Height, clientTop/Left/Width/Height, getCompu TedStyle (), currentStyle(in IE));

The following causes reflow to occur

1: Change the window size

2: Change the text size

3: content changes, such as user typing in the input box

4: Activate pseudo class, such as hover

5: Operates on the class property

6: Scripts manipulate DOM

7: Calculate offsetWidth and offsetHeight

8: Set the style property

** Repaint: changing an element’s background color, text color, border color, etc., without affecting its surrounding or internal layout, will only cause the browser to repaint. Repaint is significantly faster than Reflow