I’ve heard of both reflux and redraw. Whenever I talk about performance optimization, I’ll talk about this topic, so I’ll write it down to deepen my memory. I hope that when WE discuss it later, some details will come to mind and I won’t have to search on the Internet.

💭 First nuggets of this article: simply record reflow and Repaint

Browser engine rendering process

To get started, familiarize yourself with the general process of browser DOM rendering, which consists of four main steps:

  1. Parse the HTML structure and build a DOM tree

  2. Build the render tree

  3. Layout of the render tree

  4. Draw the render tree

The detailed process is as follows:

  1. Analyze THE HTML structure and build a DOM tree

  2. Analyze CSS styles and parse out style rule sheets

  3. Associate a DOM tree with a style rule table to build a Render tree (the process of building is called an Attachment)

    1. Starting at the root of the DOM tree, each visible node is traversed

      • Head, meta, title and other nodes will not be added to the render tree and will not affect the render output

      • The style display: None is also ignored [1]

    2. For each visible node, find and match the corresponding style rule

  4. Start laying out the nodes in the Render tree (i.e. determine the coordinates and sizes of each node)

  5. Once you have the coordinates, the browser traverses the Render tree to draw the individual nodes

Note: [1] Different from visibility: hidden, visibility: hidden will set the element to invisible and occupy a space on the page, while display: None removes the node from the entire Render tree and can be interpreted as not being part of the layout.

What is reflux and redraw

The two rendering behaviors that can occur during rendering the render tree we just saw are called backflow and redraw.

Reflow

When the geometry of a DOM node changes (e.g., the width and height of the DOM node change),

The browser will examine all other affected areas and recalculate their size and location

The DOM nodes are then automatically arranged and finally redrawn, a process known as reflow.

When the DOM is facelifted, it triggers reflow.

Repaint

If the image, color, and shadow of a DOM node change, that is, no layout or layout issues are involved, the DOM node can be directly drawn without layout. This process is called repaint.

DOM is simply made up to trigger repaint.

Triggering scenarios

Reflow

  1. When JS manipulates the DOM
  2. Set the style attribute/change the element visibility (display: none ）
  3. The elementwidth/height,fontSize,borderThe modified
  4. animation 和 transition
  5. Read some attributes of the element itself (offsetWidth.offsetHeight.getComputedStyle(), etc.)
  6. scrollScroll event
  7. Window size changes

Repaint

  1. Color modification
  2. Text direction modification
  3. Shadow modification

conclusion

  • reflowThe trigger recalculates the size and position of the node, and may trigger itchildrenNodes,parentNode and other nodesreflow, high cost
  • repaintIt doesn’t have to triggerreflow, butreflowBound to lead torepaint.
  • Due to therepaintDoes not affect the layout, so compared toreflowThe overhead is very low

In fact, the browser can choose to wait until the thread ends and then re-flow and modify the DOM. This means that if these changes happen fast enough in the same thread, they might only result in one reflow

That is, most modern browsers have optimized reflow to wait for a large enough number to do a batch before triggering reflow

Keeping the number of reflows to a minimum

Some optimization

  • As far as possible to reduceDOMoperation
  • To reduceDOMNested hierarchy
  • Try not to use inline styles
  • Avoid the use oftableLay out,tableChanges in the size and content of each element in thetableRecalculation of. To switch todivCan effectively avoid unnecessaryreflow å’Œ repaint
  • For complex animations, set them upposition: fixed/absoluteKeep elements out of the document flow as much as possible to minimize impact on other elements

References:

Render-tree Construction, Layout, and Paint

Vue Core Virtual DOM(VDOM)

Rendering: repaint, reflow/relayout, restyle

Keeping the number of reflows to a minimum