We know that browsers go through the following steps when parsing a document:

  1. willHTMLResolve toDOMThat will beCSSResolve toCSSOM.DOMandCSSOMCombined to generateRender Tree
  2. Then according to theRender TreeDraw nodes on the page

Backflow is the process by which the browser rerenders part or all of the document when the size, structure, or properties of an element change. Redraw is when the style of an element changes without changing its position in the document flow.

Reflux (Reflow)

Now that we understand backflow, let’s look at what actions can cause browser backflow:

  1. The browser window size changed. Procedure
  2. The size or position of the element changed
  3. Element content changes
  4. Element font changes
  5. Add or removeDOM
  6. The activationCSSpseudo-classes
  7. Query some properties or call some methods:
  • ClientWidth, clientHeight, clientTop, clientLeft
  • OffsetWidth, offsetHeight, offsetTop, offsetLeft
  • ScrollWidth, scrollHeight, scrollTop, scrollLeft
  • ScrollIntoView (), scrollIntoViewIfNeeded ()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

Redraw (Repaint)

When the style change of an element on the page does not affect its position in the document flow, the browser simply assigns the new style to it and redraws it, which is called redraw. For example, color, background-color, and visibility

thinking

So how do we avoid redrawing and refluxing?

  • Avoid the use oftablelayout
  • Apply the animation effect topositionProperties forabsoluteorfixedElements that leave the document flow do not cause backflow
  • You can usetranformProperty to set the animation
  • Avoid frequent manipulation styles and use them insteadclassTo change the style
  • Avoid frequent operationsDOM, create adocumentFragmentIt’s on top of itDOMoperation
  • You can start by setting the element todisplay:none, and then display it after operation. Because in thedisplayfornoneOperation on the element does not cause redraw and reflow