Before you can learn about redraw and reflow, you need to understand how the browser renders

First, browser rendering principle

There are five steps to browser rendering

  1. Process THE HTML and build the DOM tree.
  2. Process CSS to build CSSOM trees.
  3. Merge DOM and CSSOM into a render tree.
  4. According to the layout of the render tree, calculate the position of each node.
  5. Call THE GPU to draw, synthesize the layer and display it on the screen

Steps 4 and 5 are the most time-consuming, and together they are what we call rendering

The details are as follows:

Apply colours to a drawing

  • When a web page is generated, it is rendered at least once

  • It is constantly re-rendered as the user accesses it

Rerendering requires either repeating the previous step 4 (regenerating the layout)+ step 5 (redrawing) or just step 5 (redrawing)

What happens when rendering is blocked?

  • Rendering in the first place requires generating a rendering tree, so HTML and CSS will definitely block rendering. If you want to render faster, the more you should reduce the file size you need to render in the first place, flatten the hierarchy, and optimize the selector.

  • Then, when the browser parses the script tag, it pauses building the DOM, and when it’s done, it picks up where it left off. That said, if you want the first screen to render as quickly as possible, you should not load JS files on the first screen, which is why it is recommended to place the script tag at the bottom of the body tag.

  • At the moment, of course, it’s not necessary to put the script tag at the bottom, as you can add defer or async properties to the script tag.

  • When the script tag adds the defer attribute, it means that the JS file will be downloaded in parallel, but will be executed sequentially after the HTML has been parsed, so you can place the script tag anywhere in this case.

  • Async property can be added to JS files without any dependencies to indicate that JS file downloading and parsing will not block rendering.

2. Repaint

The process of redrawing an element when its appearance is changed without changing its layout is called redrawing.

Common attributes that cause redraw:

  • color
  • border-style
  • visibility
  • background
  • text-decoration
  • background-image
  • background-position
  • background-repeat
  • outline-color
  • outline
  • outline-style
  • border-radius
  • outline-width
  • box-shadow
  • background-size

Iii. 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.

Common properties and methods that cause reflux:

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

Backflow can be triggered in the following ways

There are several cases:

  1. Page first render
  2. DOM manipulation (additions, deletions, order changes, etc.)
  3. Content changes, such as text changes or picture size changes caused by the width and height of the calculated value;
  4. Changing the position of an element, or using animation;
  5. Element size changes – size, margins, borders;
  6. CSS properties are changed or recalculated
  7. Add and delete stylesheet content
  8. Modifying class attributes
  9. Browser window changes (scrolling or zooming)
  10. Pseudoclass style activation (: Hover, etc.)

Four, the relationship between redrawing and reflux

Backflow must occur redraw, redraw does not necessarily cause backflow.

Five, 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. That is, changing the children of the parent node is likely to result in a series of backflows of the parent node.

Six, optimization

1. Browser optimization:

The browser maintains a queue and places all operations that cause backflow and redraw in this queue. When the number of operations in the queue reaches a certain number of times or at a certain interval, the browser flushes the queue and performs a batch. This will turn multiple backflow and redraw into a single backflow redraw.

2. Reduce redrawing and reflow

CSS

  1. Avoid table layouts.

  2. Change the class at the very end of the DOM tree whenever possible.

  3. Avoid setting multiple inline styles. CSS selectors match from right to left to avoid DOM depth

  4. Apply the animation to an element whose position attribute is absolute or fixed.

  5. Avoid USING CSS expressions (such as calc()).

  6. Use visibility instead of display: None, because the former will only cause redraw and the latter will cause backflow (changing the layout)

  7. Turn frequently running animations into layers that prevent backflow from affecting other elements. For the video TAB, for example, the browser automatically turns the node into a layer.

JavaScript

  1. To avoid manipulating styles too often, it is best to override the style property once, or define the style list as class and change the class property once.

  2. To avoid frequent DOM manipulation, create a documentFragment, apply all DOM manipulation to it, and finally add it to the document.

  3. You can set display: None to the element and display it when you’re done. Because DOM operations on elements with the display attribute none do not cause backflow and redraw.

  4. Avoid frequently reading properties that cause backflow/redraw, and if you do need to use them more than once, cache them in a variable.

  5. 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.

Vii. Reference materials

www.jianshu.com/p/76bb929ea…