Writing in the front

Before we discuss backflow and redraw, we need to know:

  1. Browsers use a Flow Based Layout model.
  2. The browser will putHTMLParsed intoDOM,CSSParsed intoCSSOM.DOMandCSSOMA merger occursRender Tree.
  3. There are theRenderTree, we know the style of all the nodes, calculate their size and position on the page, and finally draw the nodes on the page.
  4. Since browsers use streaming layouts, yesRender TreeThe calculation is usually done only once, buttableWith the exception of their internal elements, they may require multiple computations, usually taking three times as long as their equivalent elements. Why avoid themtableOne of the reasons for layout.

In a word: redrawing does not necessarily cause redrawing.

Reflux (Reflow)

When the size, structure, or attributes of some or all of the elements in the Render Tree change, the process by which the browser rerenders some or all of the document is called reflux.

Operations that cause backflow:

  • Page first render
  • The browser window size changed. Procedure
  • The size or position of the element changed
  • Element content changes (number of words or image size, etc.)
  • Element font size changes
  • Add or removevisibletheDOMThe element
  • The activationCSSPseudo classes (e.g.:hover)
  • Query some properties or call some methods

Some common properties and methods that cause backflow:

  • clientWidth,clientHeight,clientTop,clientLeft
  • offsetWidth,offsetHeight,offsetTop,offsetLeft
  • scrollWidth,scrollHeight,scrollTop,scrollLeft
  • scrollIntoView(),scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

Redraw (Repaint)

When a change in the style of an element in a page does not affect its position in the document flow (e.g., color, background-color, visibility, etc.), the browser assigns the new style to the element and redraws it, a process called redraw.

Performance impact

Reflux is more expensive than drawing.

Sometimes even if only a single element is backflowed, its parent element and any elements that follow it will also backflow.

Modern browsers are optimized for frequent backflow or redraw operations:

The browser maintains a queue that queues all operations that cause backflow and redraw, and if the number of tasks or time intervals in the queue reaches a threshold, the browser emptying the queue and doing a batch, thereby turning multiple backflow and redraw into one.

The browser clears the queue immediately when you access the following properties or methods:

  • ClientWidth, clientHeight, clientTop, clientLeft

  • OffsetWidth, offsetHeight, offsetTop, offsetLeft

  • ScrollWidth, scrollHeight, scrollTop, scrollLeft

  • Width, height,

  • getComputedStyle()

  • getBoundingClientRect()

Because there may be operations in the queue that affect the return value of these properties or methods, even if the information you want is not related to the change caused by the operation in the queue, the browser will force the queue to empty to make sure you get the most accurate value.

How to avoid

CSS

  • Avoid the use oftableLayout.
  • As far as possible inDOMThe end of the tree changesclass.
  • Avoid setting multiple inline styles.
  • Apply the animation effect topositionProperties forabsoluteorfixedOn the element of.
  • Avoid the use ofCSSExpressions (e.g.calc()).

JavaScript

  • Avoid frequent manipulation of styles; it is best to rewrite them all at oncestyleProperty, or define the style list asclassAnd change it onceclassProperties.
  • Avoid frequent operationsDOM, create adocumentFragmentApply all of them to itDOM manipulation, and finally add it to the document.
  • You can also set the element firstdisplay: none, and then display it after the operation. Because in thedisplayProperties fornoneOn the element ofDOMThe operation does not cause backflow and redraw.
  • Avoid frequently reading properties that cause backflow/redraw, and if you do need to use them more than once, cache them in a variable.
  • Use absolute positioning on elements with complex animations to keep them out of the document stream, which would otherwise cause frequent backflow of parent elements and subsequent elements.