CSS optimization is mainly four aspects:
- Load performance
For example, do not use @import and so on, @import will affect the loading speed of CSS files, considering the load performance, mainly from reducing the file volume, reduce blocking loading, improve concurrency, any hint can not escape these several big directions.
- Selector performance
The effect of selector on the overall performance now can be ignored, selector is more standardization and maintainability, robustness, few people in the actual work will be the selector performance as a focus on the object, but know better than not know, (reasonable selection of selectors, There is no need to use the ID selector in case of minimal use).
- Rendering performance
Rendering performance is the most important object of interest for CSS optimization. Too much page rendering junky? See if you're using a lot of Text-shadow? is the font anti-aliasing open? How is CSS animation implemented? (for some complex, seemingly cool, meaningless animated effects, consider chopping and not writing), using GPU acceleration wisely (use cache for rendering).
- Maintainability
Is it reasonable to name? Is the structure level design robust enough? (typically nesting does not exceed 5 layers), is the style reused? Elegant CSS will not only affect the later maintenance costs, but also the load performance and other aspects of impact.
CSS optimization for improved performance
