前端性能优化-静态资源优化3-CSS

本文地址： https://www.cnblogs.com/veinyin/p/14274252.html

1 提升 CSS 渲染性能

1. 谨慎使用 expensive 属性，如 nth-child、position: fixed

2. 减少样式层级数，后代选择器不要深嵌套，从右向左匹配的

3. 避免使用耗费 CPU 和内存的属性，如 text-indent: -99999px

4. 避免使用耗电量大的属性，如 CSS 3D transforms、3D transitions、opacity

2 合理使用 CSS 选择器

1. 尽量避免使用 CSS 表达式 expression （JS 可以实现，而且浏览器不怎么支持了）

2. 尽量避免使用通配符选择器，用 class 比用标签好

3. 尽量避免使用类正则的选择器 *= 、|= 、$= 、^=

3 提升 CSS 加载性能

1. 使用外链的 CSS，如 CDN 可以有缓存

2. 尽量避免使用 @import，需要把所有 import 的文件全部加载，会阻塞

4 精简 CSS 代码

1. 使用缩写语句

2. 删除不必要的0（.2rem）

3. 删除不必要的单位 (0px -> 0)

4. 删除多余分号

5. 删除多余空格和注释

6. 尽量减小样式表的大小

5 合理使用 web font

1. 将字体部署在 CDN 上

2. 将字体以 base64 的格式保存在 CSS 中，并通过 localStorage 中缓存

3. Google 字体库使用国内托管服务

6 CSS 动画优化

1. 尽量避免同时动画

2. 延迟动画初始化（其他先渲染完成，动画稍微延迟一点）

3. 结合 SVG （使用 SVG 展示，通过 CSS 控制）