Reflux redraw for performance optimization

When the browser begins to render and draw the page, DOM nodes exist in the form of box models, requiring the browser to calculate the position and width, etc. This process is called backflow. After the width, height, size, color and other attributes of the page are determined, the browser begins to draw the content, which is called redrawing.

1. What is reflux?

Backflow: When the size, structure, or attributes of some or all elements in the Render Tree change, the browser rerenders part or all of the document.

2. Operations that cause backflow:

  1. Page first render
  2. The browser window size changed. Procedure
  3. The size or position of the element changed
  4. Element content changes (number of words or image size, etc.)
  5. Element font size changes
  6. Add or remove visible DOM elements
  7. Activate CSS pseudo-classes (such as: :hover)
  8. Query some properties or call some methods

3. What is redraw?

Redraw: When a change in the style of an element on a page does not affect its position in the document flow (color, background-color, visibility, etc.), the browser will attach the new style to the element and redraw it. This process is called redraw.

4. How to optimize?

CSS
1. Avoid table layout 2. Change the class at the end of the DOM tree whenever possible 3. Apply the animation to an element with position as absolute or fixed 4. Avoid USING CSS expressions (e.g., calc)Copy the code
Javascript
1. Avoid frequent manipulation of styles. It is best to override the style property at once, or define the style list as class and change the class property at once. To avoid frequent DOM manipulation, create a documentFragment, apply all DOM manipulation to it, and add it to the document. 3. You can also set display: None; Display after operation, because DOM operations on elements with display attribute none do not cause backflow and redraw 4. Avoid frequently-read properties that cause backflow and redraw, and cache them in a variable if they are used multiple times. Use absolute positioning for elements with complex animations to keep them out of the document stream, otherwise it will cause frequent backflow of parent elements and subsequent elementsCopy the code

5. Common properties that cause backflow

  • ClientWidth, clientHeight, clientTop, clientLeft
  • OffsetWidth, offsetHeight, offsetTop, offsetLeft
  • ScrollWidth, scrollHeight, scrollTop, scrollLeft
  • ScrollIntoView (), scrollIntoViewIfNeeded ()
  • GetComputedStyle (), getBoundingClientRect(), scrollTo()