With this foundation in place, let’s look at three concepts related to the rendering pipeline: “rearrange”, “redraw” and “compose”.

Updated element geometry (rearranged)

Please refer to the following figure:

As you can see from the above figure, if you modify the geometry of an element using JavaScript or CSS, such as changing the width, height, etc., then the browser triggers a relayout, a series of sub-stages after parsing, calledrearrangement. No doubt,Rearrangement requires updating the entire rendering pipeline, so it is also the most expensive.

Update the draw attribute of an element (redraw)

For example, if you change the background color of some elements in JavaScript, the layout phase will not be performed because there is no change in geometry, so you go straight to the draw phase and then perform a series of subsequent sub-phases called redraw. Compared to rearrangement, redraw eliminates layout and layering, so the execution efficiency is higher than that of rearrangement.

Direct synthesis stage

If you change a property that does neither layout nor draw (such as some animation effects in CSS3’s implementation), the rendering engine skips layout and draw and only performs subsequent composits, which we call composits. Please refer to the following figure for specific process:

In the image above, we use the TRANSFORM of CSS to animate the effect, which avoids the rearrangement and redraw phases and executes the compositing animation directly on the non-main thread. This is the highest efficiency, because it is synthesized on the non-main thread, and does not occupy the main thread resources, and also avoids the layout and drawing two sub-stages, soCompared with redrawing and rearranging, composition can greatly improve the drawing efficiency.

Reduce redrawing and rearranging?

  1. Use class to manipulate styles rather than frequently manipulating styles
  2. Avoid table layouts
  3. Batch DOM operations, such as createDocumentFragment, or use frameworks, such as React
  4. Debounce Window Resize event
  5. Read and write dom attributes separately
  6. Will-change: transform to optimize

reference

  • Do you really understand reflux and redraw