CSS Performance Tuning Notes

In the internship to do a mobile project, to achieve an animation effect, on the IPhone and Chrome debugging no problem, in the thousand-dollar or so on the Android test problem is very big, the lag is very obvious, baffled its solution, vomiting blood, stroke.

This sad story is the introduction of this article, really really realize that the impact of CSS on the user experience is very obvious, a little careless is a big pit. Next, let's talk about CSS performance optimization issues.

Load performance

• Reduce file volume, compress code

• Reduce blocking loading, do not use import

• Improve concurrency (This is not very understanding)

Selector performance

The impact on the overall performance can be negligible, but the selector is more refined for standardization and maintainability, robustness. For details on how to implement this, you can refer to GitHub's share: GitHub's CSS performance by Jon Rohan

Rendering performance

Rendering performance is the most important object of interest for CSS optimization. Let's take a look at the browser rendering mechanism first.

Browser rendering mechanism

The process of rendering a Web page by a browser is broadly divided into the following steps:

1. Parsing HTML (HTML Parser)

2. Building the DOM tree

3. Render tree construction (render trees)

4. Draw the render tree (Painting)

Choose a high-consumption style carefully

What CSS properties are high-consumption? Are those properties that require a browser to perform a lot of calculations before drawing.

• Box-shadows

• Border-radius

• Transparency

• Transforms

• CSS Filters (Performance Killer)

Avoid excessive rearrangement (Reflow)

Simply explain Reflow: When the element changes, it affects the document content or structure, or the location of the element, a process called Reflow.

How to reduce Reflow

1. Do not modify the DOM style one by one, pre-define the class, and then modify the DOM's ClassName

2. Take the DOM offline and modify it, for example: first give the DOM to Display:none (once Reflow), then you change it 100 times and then show it

3. Do not place the attribute value of the DOM node in a loop as a variable in the loop

4. If possible, do not modify the DOM with a larger range of effects

5. Use absolute positioning for animated elements absolute/fixed

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

Avoid excessive redrawing (repaints)

When the element changes, it will not affect the position of the element in the page (such as Background-color, Border-color, visibility), and the browser will simply redraw the element with the new style, which is called Repaint.

Optimize animations

CSS3 animation is the priority of optimization. In addition to achieving the above two points, reduce Reflow and repaints , but 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 the application of gpu Graphics performance to the GPU for some graphics operations in the browser, because gpu is designed to handle graphics , so it's speed and energy efficiency .
GPU acceleration can be applied not only to the 2D, but also to the. Here, GPU acceleration usually consists of the following parts: canvas2d , layout synthesis (layouts compositing) , CSS3 convert (transitions) , css3 3D transform (Transforms) , webgl and .

/* * The 2d transform can be forced to turn on GPU acceleration * To improve animation performance */div {  transform:translate (10px, 10px);} div {  Transform:translate3d (10px, 10px, 0);}

It is important to note that there is additional overhead associated with turning on hardware acceleration, see this article CSS hardware acceleration for good and bad

