“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

The purpose of this series of articles is to “give every front-end engineer a high frequency knowledge base to help with their work”. This is the 31st cut of the front hundred questions. I hope friends will pay attention to the public number “kite holder” and arm their minds with knowledge.

The key steps of the rendering process have been explained in detail in the “Browser Rendering Process” section. A brief flowchart is shown below:

Today’s main character, “redraw and backflow,” causes the browser to trigger an update that rerenders the drawing, but it’s a little different. Redraw doesn’t have a layout phase, while backflow rearranges, so backflow is more expensive and costly.

31.1 to redraw

Redraw is the process by which the browser redraws certain elements of the page that have changed, such as color changes, that do not affect the layout. At this point, because only re-pixel drawing at the UI level is required, the loss is less. An operation that only triggers a redraw looks like this (note: backflow does trigger a redraw, but redrawing does not necessarily trigger backflow) :

  1. Change the background color;
  2. Change text color;
  3. Change the border color;
  4. Use visibility:hidden to hide the element;
  5. …

31.2 reflow

Backflow is the process by which the browser needs to rearrange and draw the page when certain elements in the page change and affect the layout (e.g. size, position change). The action to trigger reflux is as follows:

  1. First rendering of the page;
  2. Browser window size changed;
  3. Element size, position and content change;
  4. Element font size changes;
  5. Adding or removing visible DOM elements
  6. Activate CSS pseudo-classes (e.g. : :hover);
  7. Query certain properties or call certain methods:
  • ClientWidth, clientHeight, clientTop, clientLeft
  • OffsetWidth, offsetHeight, offsetTop, offsetLeft
  • ScrollWidth, scrollHeight, scrollTop, scrollLeft
  • The getComputedStyle() : window.getComputedStyle () method returns an object that reports the values of all the CSS attributes of an element after applying the active stylesheet and parsing any basic calculations that those values might contain.
  • getBoundingClientRect()
  • ScrollTo () : The scrollTo() method scrolls the contents to the specified coordinates.

Reduce backflow and redraw

31.3.1 Browser Optimization Policies

  1. Because each reordering incurs additional computational costs, most browsers optimize the reordering process by queuing changes and executing them in batches. The browser queues changes until a certain amount of time has passed or a certain threshold has been reached. When you get the layout information, you force the queue to refresh by accessing the following properties or using the following methods:
  • OffsetTop, offsetLeft, offsetWidth, offsetHeight
  • ScrollTop, scrollLeft, scrollWidth, scrollHeight
  • ClientTop, clientLeft, clientWidth, clientHeight
  • getComputedStyle()
  • getBoundingClientRect

All of the above properties and methods need to return the latest layout information, so the browser has to clear the queue and trigger a backflow redraw to return the correct value. Therefore, when changing styles, it is best to avoid using the attributes listed above, which all refresh the render queue. If you want to use them, it is best to cache the values.

  1. Another optimization is that the browser assumes that changes to an element whose position is absolute or fixed affect only the element itself and its children, while changes to a static element affect all subsequent elements. The reason for this is that Both Absolute and Fixed assume that elements are removed from the document stream and that what you do with them is internal. For example, for complex animation effects, use absolute positioning to take them out of the document stream

31.3.2 Multiple Operations become one Operation

  1. Don’t style the DOM one by one. Use classes to style the DOM.
  2. Modify DOM offline (batch modify DOM)

(1) Use the documentFragment object to manipulate the DOM in memory

(2) First give the DOM to display: none, and then display it after modification

(3) Clone a DOM node into memory and change it as you like, then swap it with the online one.

31.3.3 other

  1. With CSS3 hardware acceleration, transform, opacity, and filter animations will not cause backflow redraw (note: other animation properties, such as background-color, will still cause backflow redraw, but it will improve the performance of these animations)
  2. Do not put property values of DOM nodes in a loop as variables in the loop. Otherwise it’s going to cause a lot of reading and writing of the properties of this node.
  3. Never use a table layout. A small change may cause the entire table to be rearranged.

1. If you think this article is good, please share and like it so that more people can see it

2. Pay attention to the public number of kite holder, with the main kill front hundred questions