How to improve css performance

Improvement method: 1. Write the style in the css file and reference it in the head; 2. Do not use "@import"; 3. Avoid using complex selectors, the fewer levels, the better; 4. Streamline the style files of the page; 5. Use CSS inheritance to reduce the amount of code; 6. Use floating and positioning attributes carefully; 7. Standardize various browser prefixes, etc.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

How to improve CSS performance, based on the loading performance of the page and CSS code performance, the main performance is: Loading performance (Mainly starting from reducing file size, reducing blocked loading, and improving concurrency) ,Selector performance, Rendering performance,Maintainability.

1. Try to write the style in a separate css file and reference it in the head element

(1) Content and style are separated, easy to manage and maintain

(2) Reduce page size

(3)CSS files can be cached and reused, reducing maintenance costs

2. Do not use @import

If you use @import If the attribute is introduced into CSS, when the user browses on a slow Internet speed, he will see a page without styles, and then he will be able to see the proper style as the CSS file is downloaded

3. Avoid using complex selectors, the fewer levels, the better

Projects have more and more modules, and their functions are becoming more and more complex. The CSS selectors we write will have multiple layers inside, making them more and more complex. It is recommended that the nesting of selectors should not exceed three levels. A concise selector can not only reduce the size of the CSS file and improve the loading performance of the page, but will also be more efficient when the browser parses it. It will also improve the development efficiency of developers and reduce the cost of development. Maintenance costs.

4. Streamline the style files of the page and remove unused styles

(1) The style files are too large, which affects the loading speed

(2) The browser will perform redundant Style matching affects rendering time.

Merge the CSS files used in the current page according to the css required by the current page. Merging into one file has an advantage: the style files will be cached by the browser, and there is no need to download the style files when entering other pages.

5. Use CSS inheritance to reduce the amount of code

We know that some CSS codes can be inherited. If the parent element has already set the style, the child element does not need to set the style. This is also a proven way to improve performance.

6. Use high-performance attributes carefully: floating and positioning;

On the one hand, the various complex layout rules of floating are destined to be an exploratory local reflow layout algorithm. The browser takes a lot of effort to process it. On the other hand, the layout of floated elements involves many more factors. In the same layout space, all floating elements exist in the "floating layer" above the "static layer". Not only do multiple floating elements in the floating layer affect each other, floating elements also interact with the static layer.

7. CSS style prefix

Standardize various browser prefixes, with browser prefixes in front and standard ones in the back

8. CSS attribute values ​​

When the attribute value is 0, no unit is added

When the attribute value is a floating point number 0.**, the 0 before the decimal point can be omitted

The above is the detailed content of How to improve css performance. For more information, please follow other related articles on the PHP Chinese website!