The page rendering process described in the previous article as a well-written process from entering the URL to rendering, which involves Layout and Painting of the page, followed by an actual step called Compositing.

Compositing

In other big guy’s article will say this step very clearly, of course, it is difficult to understand, because it is abstract, usually in the work completely do not contact. Let me summarize my understanding here.

  1. The rendering process prior to composition transforms the DOM tree into a rendering layer

  1. This compositing step merges the render layers into compositing layers. There are many ways to create new compositing layers, and these methods are also commonly referred to as CSS hardware acceleration methods

  • Transforms: Translate3D, translateZ, etc

  • Video, Canvas, iframe and other elements

  • Animation-opacity conversion via element.animate (

  • Opacity animation conversion via с SS animation

  • position: fixed

  • Has the will-change attribute

  • Animation or transition is applied to opacity, Transform, fliter and backdropfilter

  1. After compositing, there will be different compositing layers, which will be rendered independently on the GPU

  2. When there is a GPU, rendering is actually carried out on the GPU, but the Layout, Painting and rendering layer calculation of the page are all calculated on the CPU, which will consume CPU.

  3. The principle of GPU acceleration is to elevate elements into separate compositing layers. When processing compositing layer animation, animation calculation and rendering can be performed directly on the GPU, without the need to go through the process of Repaint, which consumes CPU and is faster and smoother.

  4. The compositing layer is not without its drawbacks. Each compositing layer takes up extra content in GPU rendering alone, and too many compositing layers will lead to high memory usage (layer explosion).

The latter

The above content is summarized after reading other big guy blogs, there may be a lot of misunderstanding, welcome to correct.

reference

  • Browser layer composition and page rendering optimization

  • Illustrate the basic workings of the browser

  • Hardware acceleration for CSS animation

Welcome to the front food birds together fish paddling ~ 516913974