rearrangement

  • The process of the browser rerendering part or all of the DOM when part or all of the RENDER Tree changes due to the size, layout, hiding, etc. Also known as rearrangement, rearrangement is literally easier to visualize (rearranging the entire page).
  • Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow.
  • Rearrangement is also called reflux. In fact, the literal meaning of reflow is also reflux. The reason why it is called rearrangement may be because it is better to understand and more in line with the Thinking of Chinese people. Standard documents are called Reflow because browser rendering is based on a “streaming layout” model. Streaming is actually what we call a document flow. When the DOM or CSS geometry changes, the document flow is subject to a wave linkage to change
  • The operations that cause the rearrangement are
    1. The browser window size changed. Procedure
    2. The size or position of the element changed.
    3. Element content changes (text number or image size, etc.).
    4. Element font size changes.
    5. Add or remove visible DOM elements.
    6. Activate CSS pseudo-classes (such as: :hover).
    7. Setting the style property
    8. Query some properties or call some methods.
    9. Page rendered for the first time.

redraw

  • When some elements in the Render Tree need to update their attributes, these attributes only affect the appearance and style of the elements, not the layout, such as background-color. It’s called redrawing.
  • When a page element style change does not affect the element’s position in the document flow (such as background-color, border-color, or visibility), the browser will simply assign the new style to the element and redraw it

How to reduce reflux and redraw?

Avoid backflow and redraw in the CSS

  1. Change the class at the very end of the DOM tree whenever possible
  2. Avoid setting multiple inline styles
  3. The animation effect is applied to elements whose position attribute is absolute or fixed
  4. Avoid table layouts
  5. Using CSS3 hardware acceleration, transform, opacity, filters and other animation effects do not cause backflow redraw.

JS operation to avoid backflow, redraw

  1. Instead of changing one JS style and then the next, it’s better to change the CSS style once, or define the style list as the name of the class
  2. To avoid frequent DOM manipulation, create a subtree using document fragments and then copy them into the document
  3. Hide the element and make changes before displaying it, because DOM operations on display: None do not cause backflow and redraw
  4. Avoid looping through properties such as offsetLeft and save them before looping
  5. For complex animation effects, use absolute positioning to keep them out of the document stream, otherwise it will cause massive backflow of parent elements and subsequent elements

conclusion

Backflow is a user-led operation in the browser, so knowing how to improve backflow times and how various document attributes (DOM node depth, CSS rendering efficiency, various style changes) affect backflow times is helpful for front-end development. Sometimes even refluxing a single element may require that its parent and any elements that follow it also refluve. For example, if you need to change the background of an element, the attributes of that element are not involved, so only redraw occurs.