减少CSS文件体积：
-
压缩CSS文件：使用工具如
cssnano或CleanCSS来压缩CSS文件，移除多余的空格、注释和换行符。 -
移除未使用的CSS：通过工具如
PurgeCSS或UnCSS检测并移除未使用的样式规则。 -
合并CSS文件：将多个CSS文件合并为一个文件，减少HTTP请求次数。
优化选择器性能：
- 避免使用低效选择器：避免使用通配符选择器（*）和复杂的后代选择器，尽量使用类选择器（.class）和ID选择器（#id）。
- 减少层级嵌套：避免过深的嵌套，尽量保持选择器简洁，避免超过三层嵌套。
- 使用高效的选择器：优先使用ID选择器，其次是类选择器，最后是标签选择器。
减少渲染阻塞：
- 使用异步加载CSS：对于非关键CSS，可以使用
<link rel="preload">（通过rel属性将link元素标记为alternate可选样式表，实现浏览器异步加载。同样别忘了加载完成 之后，将rel设回stylesheet）或JavaScript（将link标签插入到head标签最后）进行异步加载。
// 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将 media 的值设为 screen 或 all，从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.med
ia='all'">
// 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='styl
esheet'">
- 使用内联关键CSS：将首屏渲染关键的CSS内联到HTML的
<style>标签中，以避免额外的CSS文件请求。 - 避免使用@import：@import会阻塞页面渲染，建议使用
<link>标签引入CSS文件。
优化动画性能：
- 使用硬件加速属性：如
transform: translate3d(0, 0, 0)或will-change: transform等属性可以开启硬件加速，提高动画性能。 - 避免过度使用动画：减少不必要的动画效果，使用
will-change属性预测动画效果，减少实际动画计算量。
采用现代CSS特性：
- 使用CSS变量：定义可复用的样式值，减少代码重复。
- 使用逻辑属性：如
calc()函数进行计算，减少代码复杂度。 - 使用Sass或Less等预处理器：组织代码，使用变量、嵌套和混入等功能，提高可维护性。
其他优化技巧：
- 减少使用昂贵属性： 在页面发生重绘的时候，昂贵属性如 box-shadow/border-radius /filter /透明度/:nth-child 等，会降低浏览器的渲染性能
- 缓存CSS文件：设置合理的缓存策略，如Cache-Control和Expires头，避免重复下载。
- 定期进行性能测试：使用工具如Chrome DevTools、Lighthouse等定期检查CSS性能，识别潜在的性能瓶颈。
