Backflow and redraw the front end

1. Return

Backflow, also known as rearrangement, is triggered when part (or all) of the Render Tree needs to be rebuilt due to changes in element size, size, layout, etc

Specifically summarized as:

  • Initial page rendering
  • Add and remove visible DOM elements
  • Change element position, size, content
Properties that trigger backflow:
  • Box model attributes: width, height, display, border, border-width…
  • Position and float: position, left, right, top, bottom, float, padding, margin…
  • Text-align, overflow, font-weight, font-family, line-height, vertical-align, font-size, white-space…

2. Redrawn

Redraw is triggered when some element in the Render Tree needs to update attributes that affect the appearance, style and not layout of the element

Attributes that trigger redraw:

Color, border-style, border-radius, outline, visibility, background-color, text-decoration, background, background-image, box-sha Dow…

Backflow must be redrawn, but redrawing does not necessarily backflow

3. How to reduce backflow and redraw

  • Use translate instead of top
  • Use opacity instead of visibility
  • Define the className up front, and then change the className of the Dom uniformly
  • Do not place Dom node property values in a loop as loop variables
  • Make the elements to be manipulated “offline” and then update them together