preface

Interviewer: Since you mentioned redrawing and rearranging, say something about it.

Me:… 💥

Let’s start by reviewing the flow of the rendering pipeline:

backflow

First, reflux. Backflow is also called rearrangement.

The trigger condition

To put it simply, backflow occurs when changes to the DOM structure cause the DOM geometry to change. For example:

  1. The geometry of a DOM element changes. Common geometry properties arewidth,height,padding,margin,left,top,borderWait, that’s easy to understand.
  2. Make the DOM node happenIncrease or decreaseormobile.
  3. Read and writeoffsetThe family,scrollandclientIn order to retrieve these values, the browser needs to perform a backflow operation.
  4. callwindow.getComputedStyleMethods.

Reflow process

Following the rendering pipeline above, when backflow is triggered, if the DOM structure changes, the DOM tree is re-rendered and the rest of the process (including tasks outside the main thread) is completed.

It’s like going through the parsing and composition process all over again, and it’s very expensive.

redraw

The trigger condition

Repaint occurs when DOM changes result in style changes that do not affect geometry properties.

Redraw process

Because there are no changes to the GEOMETRY of the DOM, the element position information does not need to be updated, eliminating the need for layout. The process is as follows:

Skip the stages of generating layout trees and building layer trees, directly generate the drawing list, and then continue the following series of operations, such as partitioning, bitmap generation.

So redrawing doesn’t necessarily cause backflow, but backflow must have redrawn.

synthetic

This is a case that we might not be familiar with, which is direct synthesis. For example, CSS3’s transform, opacity and filter properties can be used to achieve the synthetic effect, which is commonly referred to as GPU acceleration.

Causes of GPU acceleration

In the case of composition, it skips the layout and drawing process and goes directly to the parts that are not handled by the main thread, that is, directly to the composition thread. Leaving it to it has two main advantages:

  1. Be able to give full play toGPUThe advantage of. The thread pool is called and used by the composite thread as it generates the bitmapGPUAnd gpus are good at processing bitmap data.
  2. There are no resources tied up in the main thread, and even if the main thread is stuck, the effect is still smoothly displayed.

conclusion

Knowing the principles above, what are the implications for the development process?

  1. Avoid using style too often, and instead modify itclassThe way.
  2. usecreateDocumentFragmentPerform batch DOM operations.
  3. For resize, scroll, etc., perform anti-shake/throttling.
  4. Add will-change: Tranform and have the rendering engine implement a separate layer for it. When these transformations occur, only the composition thread is used to process them without involving the main thread, greatly improving rendering efficiency. Of course, this change is not limited totranform, any CSS property that can be synthesizedwill-changeTo declare.