What is reflux?

Backflow occurs when an element’s own width and height, layout, show or hide, or text structure within the element changes, causing the page to be rebuilt

What is redraw?

Redraw occurs when an element’s own width, height, layout, and display or hide are not changed, but only the appearance of the element

When will backflow occur?

  1. Add or remove visible DOM elements

  2. The position of the element changes

  3. The size of the element changes

  4. Content change

  5. The first time the page is rendered

List some related CSS styles: width, height, line-height, padding, margin, diaplay, border, top, position, float, font-size, overflow, etc

When will it be redrawn?

List some related CSS styles: color, background, background-size, visibility, and box-shadow

How to optimize performance?

  1. Transform instead of top, left, margin-top, margin-left… These displacement properties

  2. Instead of using JS code to style multiple DOM elements, choose a className instead

  3. Do not get dom styles in loops such as offsetWidth, offsetHeight, clientWidth, clientHeight, etc. The browser has a backflow buffer, and backflow occurs when these properties are fetched

  4. Instead of having multiple layers of inline styles, write an external class so that it only flows back once

  5. Remove multiple refluxed elements from the document stream, such as animations, using the fixed or absolute value of the position property

  6. Change together (modify all attributes that need to be changed at the same time)