preface

Let’s review the general process of the browser rendering process: build the DOM tree, calculate the Style, obtain the Layout tree, generate the Layer tree, Paint the Layer, Raster, DrawQuad.

Once you understand the browser rendering process, it’s easy to understand the concepts of rearrangement, redraw, and composition.

rearrangement

Rearrangement, also known as backflow, is the process of browsing to retrigger the Layout after updating the geometry of an element, updating the entire rendering process.

The key is to change the geometry of the element, such as changing the width and height of the element. This change will cause the browser to update the entire rendering pipeline from the layout, which is the most expensive. As shown below:

Some situations that can cause reordering operations:

  • Add or remove visible DOM elements
  • The position of the element changes
  • The size of the element changes (including margins, inner borders, border size, height, width, etc.)
  • Content changes, such as text changes or an image being replaced by another image of a different size.
  • Browser window size changes (because backflow calculates element position and size based on viewport size)

Depending on the extent and extent of the change, large or small portions of the rendering tree need to be recalculated. Some changes can trigger a rearrangement of the entire page, such as when a scrollbar appears or when a root node is modified.

redraw

Redraw, because there is no change in geometry, so the browser goes straight to Paint and performs the subsequent rendering process.

It is the key to update the drawing properties, does not cause the change of the geometry, such as the background color of the modified element or text color, it can be started from layer rendering stage update rendering pipeline, compared with rearrangement, redrawn saves the layout and hierarchy, so the execution efficiency will share line operation.

Therefore, rearrangement must occur redrawing, redrawing does not necessarily cause rearrangement.

synthetic

From the rendering pipeline’s point of view, modifying layout attributes causes rearrangement, and modifying draw attributes causes redraw. What about modifying a property that neither layouts nor draws?

If you modify a property that does neither layout nor draw, the rendering engine skips the layout and layer drawing stages and only performs subsequent compositing operations, a process called compositing.

For example, CSS’s Transform is used to animate the animation, which avoids the rearrangement and redraw phases and executes the compositing animation directly on the non-main thread. This is very efficient, because it is composed on the non-main thread, does not occupy the main thread resources, and avoids the layout and drawing two sub-stages, so compared with redraw and rearrangement, composition can greatly improve the drawing efficiency.

Browser optimization

Modern browsers are smart enough to use queuing mechanisms to update layouts in bulk, since each rearrangement incurs an additional computation cost. The browser queues changes, and it takes at least one browser refresh (16.6ms) to clear the queue. This allows multiple rearrangements and redraws to become a reflux redraw.

However, when retrieving layout information, there may be operations in the queue that affect the return values of these properties or methods, and even if not, the browser will force the queue empty, triggering reordering and redrawing to ensure that the correct values are returned.

These include the following attributes or methods:

  • offsetTop,offsetLeft,offsetWidth,offsetHeight
  • scrollTop,scrollLeft,scrollWidth,scrollHeight
  • clientTop,clientLeft,clientWidth,clientHeight
  • width,height
  • getComputedStyle()
  • getBoundingClientRect()

All of the above attributes 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, it is best to avoid using the attributes listed above when modifying styles, as they all force the render queue to refresh. If you want to use them, it is best to cache the values.

How to reduce rearrangements and redraws?

First of all, why does reducing rearrangement and redrawing improve Web performance?

From the perspective of the rendering pipeline, the reduction of rearrangement and redrawing, the elimination of layout and drawing phases, thus eliminating many calculations and operations on the main and non-main lines of the rendering process, can speed up the rendering presentation of the page, which is our goal.

How to reduce rearrangements and redraws?

The browser itself will make some optimizations, but we should also avoid rearranging and redrawing our code:

When writing JS code:

  • Avoid frequent manipulation of styles, it is better to rewrite it oncestyleProperty, or define the style list asclassAnd change it onceclassProperties.
  • Avoid frequent DOM manipulation, create adocumentFragmentApply all DOM operations to it, and finally add it to the document. Or hide elements while they are being modified and display them when they are done.
  • 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.

When writing CSS code, you can:

  • usetranformalternativetop.tranformIs a composite property that does not cause rearrangement or redrawing
  • usevisibilityreplacedisplay:none, the former will only redraw, the latter changes the layout will cause rearrangement
  • Avoid the use oftableLayout, maybe a small change can make the whole thingtableThe rearrangement, or rearrangement
  • Change at the very end of the DOM tree as much as possibleclassA rearrangement is inevitable but its impact can be reduced. Change at the very end of the DOM tree as much as possibleclass, you can limit the scope of the rearrangement to affect as few nodes as possible
  • Avoid multiple inline styles and CSS selectors match from right to left to avoid too many nodes
  • Apply the animation effect topositionProperties forabsolute 或 fixedOn the elements, avoid affecting the layout of other elements, so that only a redraw, not a rearrangement, while controlling the animation speed can be selectedrequestAnimationFrame
  • Avoid using CSS expressions, which may cause rearrangements
  • Set frequently redrawn or rearranged nodes as layers that prevent the rendering behavior of this node from affecting other nodes. Such aswill-change,video,iframeAnd the browser will automatically turn the node into a layer.
  • CSS3 hardware acceleration (GPU acceleration), using CSS3 hardware acceleration, you can maketransform,opacity,filtersThese animations do not cause rearrangement and redrawing. But other properties of the animation, for examplebackground-colorThis will still cause rearrangement and redrawing, but it will still improve the performance of these animations.

conclusion

  • Rearrangement is the process of browsing to retrigger the Layout and update the complete rendering process after updating the geometry of the elements
  • Redraw is the process in which the browser goes directly to Paint after modifying the draw properties of an element, and then executes the subsequent rendering process
  • Rearrangement always leads to redrawing, and redrawing does not necessarily lead to rearrangement
  • Compositing is a process in which the rendering engine skips the layout and layer drawing stages and performs subsequent compositing operations after modifying a property that is neither laid out nor drawn.
  • Web performance can be optimized by reducing reordering and redrawing. Browsers are optimized through queuing mechanisms, and code should be written to avoid reordering and redrawing.