css optimization, what are the methods to improve performance

Method: 1. Compress css to reduce file size; 2. Use link to import css files; 3. Design CSS layout rationally, pay attention to reusing styles, and reduce the time spent on rendering; 4. Use less "* "selector; 5. Use high-performance attributes such as floating and positioning with caution; 6. Minimize page rearrangements and redraws; 7. When the attribute value is 0, do not add units, etc.

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

CSS optimization mainly focuses on 4 aspects:

• Loading performance

  Mainly from reducing file size and reducing blocking loading , improve concurrency

• Selector performance

• Rendering performance

• Maintainability, Robustness

Let me give you a detailed introduction.

Loading performance:

1. CSS compression: Packing and compressing the written CSS can reduce a lot of volume;

2. CSS single style: When bottom margin and left margin are required,

many times choose: margin: top 0 bottom 0;

Butmargin-bottom: bottom;margin-left: left;The execution efficiency is higher;

3. Reduce the use of @import, and it is recommended to use link, because the latter is loaded on the page The former is to wait for the page to be loaded before loading;

4. Reasonably design the CSS layout, pay attention to reusing styles, and reduce the time spent on rendering. When choosing classes and IDs, use less global matching such as *, and set basic styles appropriately (such as setting table{}) to improve reuse.

Selector performance:

CSS selectors are matched from right to left. When using the descendant selector, the browser will traverse all child elements to determine whether it is the specified element, etc.;

**Avoid using wildcard rules**

Such as *{} The number of calculations is amazing! Only select the elements you need to use

** Try to select as few tags as possible, but use class**

For example: #nav li{ }, you can add the class name of nav_item to li, select .nav_item{} as follows

**Do not use tags to limit the ID or class selector**

For example: ul#nav, should be simplified to #nav

**Use descendant selectors as little as possible and reduce the weight value of the selector**

Descendant selection The overhead of the selector is the highest. Try to reduce the depth of the selector to the minimum. The maximum should not exceed three levels. Use more classes to associate each tag element

**Consider inheritance**

Understand which properties can be inherited, and then avoid repeatedly specifying rules for these properties

Rendering performance:

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

2. Minimize page rearrangement and redrawing;

Rearrange according to the writing order of css:

• Position: positon, top, left, z-index, float, dispay

• ##Size: width, height, margin, padding

• Text series: font, line-height, color, letter-spacing

• Background border: background, border

• Others: anmation, transition

##Redraw: border, outline, background, box-shadow, if you can use background-color, try not to use background;
(Learning video sharing:

css video tutorial

) 3. Remove empty rules: {};

4. When the attribute value is 0, no Add unit;

5. The attribute value is a floating decimal 0.**, and the 0 before the decimal point can be omitted;

6. Standardize various browser prefixes: those with browser prefixes come first . Standard attributes come last;

7. Do not use the @import prefix, which will affect the loading speed of css;

8. Make full use of css inheritance properties to reduce the amount of code;

9. Abstract and extract common styles to reduce the amount of code;

10. Optimize nesting of selectors and try to avoid too deep levels;

11. CSS sprite images, small ones in similar parts of the same page Icons are convenient to use and reduce the number of page requests, but at the same time the image itself will become larger. When using it, consider the pros and cons carefully before using;

12. Place the css file at the top of the page

Maintainability and robustness: 1. Extract styles with the same attributes, integrate them and use them in the page through classes to improve Maintainability of css;

2. Following the previous one, oocss is also one of the ways to improve the performance of css. By defining reusable and semantically good basic classes, and then adding them to html, this is also A method used by many UI frameworks, for example: class="btn btn-active btn-blue";

3. Separation of style and content: define the css code into external css;

4. Separation of containers and styles;

For more programming-related knowledge, please visit:

Programming Video

! !

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