Optimization points of each processing process of the rendering process

Read the summary, try to be as brief as possible, and take a look at it.

Rendering process

1. JS processing

   • JS's handling of DOM CSSOM

2. Style calculation

   • Analyze CSS to calculate the final style of each element

3. Page Layout

   • After the style calculation is over, start to calculate the width, height and coordinates of each element

4. draw

   • After the layout calculation is over, you can start drawing elements, including text, colors, borders, shadows, images, etc.

5. synthesis

   • Layer composition according to the order of elements

It is possible to skip the two processes of layout and drawing, because not all operations will cause layout and drawing.

The following is a trigger relationship between a CSS property and layout, drawing, and composition

Attributes	Blink	Gecko	Webkit
z-index	Drawing/compositing	Draw/composite	Layout/drawing/compositing
transform	synthesis	synthesis	Layout/drawing/compositing
opacity	Drawing/compositing	synthesis	Layout/drawing/compositing
min-width	Layout/drawing/compositing	Layout/compositing	Layout/drawing/compositing
color	Layout/drawing	Layout/drawing	Layout/drawing/compositing
background	Layout/drawing	Layout/drawing	Layout/drawing/compositing
border-radius	Layout/drawing	Layout/drawing	Layout/drawing/compositing
border-style	Layout/drawing/compositing	Layout/drawing/compositing	Layout/drawing/compositing
border-width	Layout/drawing/compositing	Layout/drawing/compositing	Layout/drawing/compositing

Tucao feels Gecko is pretty good.

Style calculation optimization

1. Reduce the number of matched elements, try not to use * {}
2. Reduce the complexity of the selector and use a single precise class selector as much as possible
3. Use BEM specifications (BLock, Element, Modifier), for example: .banner\_\_header_size-3 {}

Layout and redraw optimization

Layout is also called rearrangement and reflow. Here you need to know that these two also refer to the rendering process of layout.

Action to trigger reflow:

1. Modify the geometric attributes of DOM elements

   • width、height
   • padding、margin
   • left、top

2. Modify the structure of the DOM tree

   • Add DOM elements
   • Move DOM elements
   • Remove DOM elements

3. Get even layout attributes of DOM elements

   • offsetWidth、offsetHeight、offsetTop、offsetLeft
   • clientWidth、offsetHeight、offsetTop、offsetLeft
   • scrollWidth、scrollHeight、scrollTop、scrollLeft
   • window.getComputedStyle()

This may be more of a supplement to the above table, but the current perspective is for "operations", the above is more
It is for styles, so now that you know that this type of operation will cause page reflow, you should be more cautious about them.
Row operation.

A good solution is to modify the geometric properties of DOM elements in a package operation, it is not recommended to modify one by one
For operations such as el.style.top ='...', you should consider adding classes for packaging operations.

Rendering performance evaluation

You can use Chrome's More tools -> Rendering to evaluate the rendering performance.

synthesis

There are two factors that affect synthesis performance:

1. The number of layers to be synthesized
2. Realize the relevant properties of the animation

Use will-change to minimize the optimization of the drawing area by creating a new layer
, Chrome, firefox, opera can be set

.layer {
    will-change: transform;
}

To achieve the purpose of adding a new layer; however, safari does not support will-change , so you need to use a workaround
Method to create a layer

.layer {
    transform: translate(0);
}

But don't forget it! Excessive number of layers is also one of the reasons for low synthesis performance, so please don’t abuse
will-change。

So for will-change , which css attributes can benefit?

It is also mentioned above that will-change is optimized for the synthesis stage, so the css animation in the non-synthesis stage belongs to
Sex for will-change will not bring performance improvement.

The animations suitable for will-change (composite stage) include the following:

Animation effect	will-change value
Transform	transform
transparent	opacity

What do you mean? In other words, will-change will have performance gains.

You can use Chrome's More tools -> Layers to view the layer information of the site.