This is the 8th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.

There are three ways to update a view

  • backflow
  • redraw
  • synthetic

backflow

Also known as rearrangement, backflow is triggered when a change in the DOM structure causes a change in the DOM geometry.

Specifically, the following actions trigger backflow:

  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.

Some common properties and methods that cause backflow:

  • clientWidth,clientHeight,clientTop,clientLeft
  • offsetWidth,offsetHeight,offsetTop,offsetLeft
  • scrollWidth,scrollHeight,scrollTop,scrollLeft
  • scrollIntoView(),scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

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.

redraw

When a change in the style of an element in a page does not affect its position in the document flow (e.g., color, background-color, visibility, etc.), the browser assigns the new style to the element and redraws it, a process called redraw.

Based on the concept, we know that since there is no change in the DOM geometry, the element position information does not need to be updated, thus eliminating the layout process as follows:

Skipped the layout tree and build layer tree, directly to draw the list, and then to block, generate a bitmap and a series of operations.

As you can see, redrawing does not necessarily cause backflow, but backflow must have redrawn.

synthetic

In another case, if you change a property that neither lays nor draws, the rendering engine skips layout and drawing and directly performs subsequent compositing operations, a process called compositing.

For example, using CSS’s Transform to animate effects avoids backflow and redraw, and executes compositing animations directly in a non-main thread. Obviously, this method is more efficient. After all, this method is composed on the non-main thread and does not occupy the main thread resources. In addition, it avoids the two sub-stages of layout and drawing, so compared with redrawing and rearrangement, composition can greatly improve the drawing efficiency.

Take advantage of this:

  • The bitmap of the composite layer will be synthesized by the GPU faster than the CPU
  • When repaint is required, only repaint itself is required and no other layers are affected
  • Layout and Paint are not triggered for Transform and opacity effects

The best way to improve the composition layer is to use the WILL-change property of CSS

GPU acceleration Causes

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.

  • In the case of composition, skip the layout and drawing process and enterThe main threadThe processing part, that is, directly toSynthesis of the threadTo deal with.
  • Give full play toGPUAdvantage, the thread pool is called and used by the synthetic thread during bitmap generationGPUAnd gpus are good at processing bitmap data.
  • There are no resources tied up in the main thread, and even if the main thread is stuck, the effect is still smooth.

Practical significance

  • usecreateDocumentFragmentPerform batch DOM operations
  • For resize, scroll, etc., perform anti-shake/throttling.
  • Animations are implemented using transform or opacity
  • Set will-change of the element to opacity, transform, top, left, bottom, and right. In this way, the rendering engine will implement a separate layer for it, and when these transformations occur, it will only use the composition thread to process them without involving the main thread, greatly improving the rendering efficiency.
  • For browsers that do not support the will-change attribute, use a 3D Transform attribute to enforce promotion to compositiontransform: translateZ(0);
  • RAF optimization and so on.