1. Redraw and rearrange the overall site performance rendering

Recalculate Style 1.3 Generate graphics and position Layout for each node 1.4 Fill each node’s receipt into the layer bitmap Paint 1.5 Combine multiple Layers according to the requirements to generate an image to show you the Composite Layers

  1. Layout > Paint > Composite Layers
  2. In what case is stratification?

Root element, Position, Transform, Transform3D, translucency, Filter, Canvas, video, Overflow When GPU directly involved? Css3d, Video, WebGL, Transform, Filter hardware acceleration

  1. Rearrangement is followed by redrawing and redrawing doesn’t necessarily cause rearrangement
  2. An optimization method

For style reads and writes, read together, not interspersed, and write using requestAnimationFrame.

Here is a rendering of the schematic using positioning

Use the transform3D effect

As can be seen, under the effect of Transform3D, the browser directly skips the layout and paint phases and goes to the Composite Layers phase. Moreover, when the Paint flashing option is enabled, the page does not see the green redrawing

TTFP When you open the site, the server gives you the time to return the first byte (received by the user) FP First screen rendering time FCP first content rendering FMP first meaningful rendering TTI interactive time