CSS performance optimization notes

When I was doing an internship on a mobile project, I implemented an animation effect. There was no problem debugging it on iPhone and Chrome, but it was a huge problem when testing it on an Android machine worth about a thousand yuan. The lag was very obvious, and I was puzzled and vomited blood. , died.

This sad story is the introduction of this article. I really understand that CSS has a very obvious impact on user experience, and a little carelessness can lead to a big pitfall. Next, let’s talk about CSS performance optimization.

---

Loading performance

• Reduce file size, compress code

• Reduce blocking loading, don’t use import

• to improve concurrency (I don’t quite understand this)

Selector performance

---

The impact on overall performance is negligible, but the focus on selectors is more for standardization, maintainability, and robustness. For specific implementation, please refer to this sharing from Github: GitHub's CSS Performance by Jon Rohan

Rendering performance

---

Rendering performance is the most important focus of CSS optimization. Let’s first understand the browser’s rendering mechanism.

Browser rendering mechanism

The process of browser rendering and displaying web pages is roughly divided into the following steps:

        1. Parse HTML (HTML Parser)

  2. Build DOM Tree (DOM Tree)

3. Render Tree Construction (Render Tree)

        4. Painting Render Tree (Painting)

Choose high-cost styles carefully

What CSS properties are high-cost? It is those properties that require the browser to perform a lot of calculations before drawing.

• box-shadows

• border-radius

• transparency

• transforms

• CSS filters (performance killer)

Avoid excessive reflow (Reflow)

Simple Explain Reflow: When an element changes, it will affect the document content or structure, or the position of the element. This process is called Reflow.

How to reduce Reflow

1. Don’t modify the DOM style one by one, define the class in advance, and then modify the className of the DOM 2. Modify the DOM offline, for example: first DOM for display :none (one Reflow), then you modify it 100 times, and then display it

      3. Don’t put the attribute values ​​​​of the DOM node in a loop as variables in the loop

  4. Try not to modify it as much as possible DOM with a relatively large impact range

      5. Use absolute positioning for animated elements absolute / fixed

  6. Do not use table layout, a small change may cause the entire table to be re-layout

Avoid excessive redrawing (Repaints)

When the element changes, it will not affect the position of the element on the page (such as background-color, border-color, visibility). The browser will only apply the new style to redraw the element. This process It's called Repaint.

Optimize animations

CSS3 animation is the top priority for optimization. In addition to the above two points,

reduce Reflow and Repaints

, you also need to pay attention to the following aspects.

Enable GPU hardware acceleration

GPU (Graphics Processing Unit) is image processor. GPU Hardware acceleration refers to applying the graphics performance of GPU to hand over some graphics operations in the browser to the GPU to complete, because GPU is specially designed for processing graphics , so it has speed and energy consumption More efficient.
GPU acceleration can be applied not only to 3D, but also to 2D. Here, GPU acceleration usually includes the following parts: Canvas2D, Layout Compositing , CSS3 transformations , CSS3 3D transformations , WebGL and Video ( video).

/*
 * 根据上面的结论
 * 将 2d transform 换成 3d
 * 就可以强制开启 GPU 加速
 * 提高动画性能
 */div {  transform: translate(10px, 10px);}div {  transform: translate3d(10px, 10px, 0);}

It should be noted that turning on hardware acceleration will also have additional overhead. See this article The Good and Bad of CSS Hardware Acceleration