如果要做优化，CSS 提高性能的方法有哪些？
面试速答（30 秒版 TL;DR）
CSS 优化分两条线：
- 交付性能：让 CSS 更小、更早到达、尽量不阻塞首屏（Critical CSS、拆分、缓存、去无用）。
- 运行时性能：让样式变更更少触发布局/重绘，动画尽量走合成（少 Layout/Paint，多 Composite）。
更系统的版本见本站已有文档：CSS 在性能优化方面有哪些实践？。
一、交付性能（让 CSS 更小、更快、更不阻塞）
1）移除无用 CSS（Purge/按需加载）
- 通过构建工具移除未使用的类，或按路由/组件拆分 CSS，减少首屏需要下载与解析的体积。
- 用 DevTools Coverage 看“未使用比例”，决定是否值得做。
2）关键 CSS（Critical CSS）优先
目标：首屏别被一大坨 CSS 卡住。
- 把首屏必需样式内联或优先加载。
- 非关键样式延后加载，避免首屏渲染阻塞。
3）避免 @import 拖慢关键链路
@import 往往会让浏览器在解析到 import 后才继续请求被引入的 CSS，增加关键路径时长。
4）压缩与缓存
- 压缩（minify）+ gzip/brotli（服务器层）。
- 使用内容哈希文件名做长期缓存（变更才更新）。
二、运行时性能（让样式变更更“便宜”）
1）动画优先用“合成友好”的属性
- 推荐：
transform、opacity（更容易走合成阶段）。 - 谨慎：
width/height/left/top/margin等容易触发 Layout。
2）减少大范围样式失效与重排
工程里最常见的慢不是“选择器太慢”，而是“一次改动影响了太多节点”：
- 尽量用 class 切换而不是频繁改很多内联样式。
- 组件样式尽量局部化，避免一个全局规则命中太多元素。
3）合理使用 contain / content-visibility（有收益但要评估）
contain可以把布局/绘制影响限制在组件边界内（适合复杂组件）。content-visibility: auto可跳过屏外内容的渲染工作（长列表/长文档常见）。
面试表达建议：强调“要基于页面形态与指标验证，不是无脑开”。
4）慎用昂贵的绘制效果
filter、大面积 box-shadow、高频率的模糊/透明叠加，可能让 Paint 变重；列表里大量使用更明显。
三、怎么验证你真的优化了（面试加分点）
- 用 Performance 面板看
Recalculate Style / Layout / Paint / Composite时间占比。 - 用 Rendering 里的 Paint flashing（或类似功能）观察是否出现大面积重绘。
- 用 Lighthouse / Web Vitals 关注 LCP、CLS、INP 是否改善（以及是否引入 FOUC）。
常见追问（面试会顺带问）
Q1：CSS 为什么会阻塞首屏渲染？
答：浏览器要先拿到 CSS 并构建 CSSOM 才能进行样式计算与首次绘制；所以关键 CSS 属于渲染关键路径上的阻塞资源。优化就是减少关键 CSS 体积与依赖链路，让首屏更早具备可渲染的样式。
Q2：选择器写得很复杂会不会很慢？
答：现代浏览器对选择器匹配有很多优化，绝大多数业务场景“选择器复杂度”不是瓶颈；更常见的性能问题来自频繁触发大范围样式重算、布局与绘制。面试可以补一句：“但仍建议避免特别离谱的全局深层选择器，主要为了可维护性与避免大范围命中。”
易错点/坑
- “过度拆分 CSS”导致请求管理复杂，甚至出现 FOUC（样式闪烁）。
- 滥用
will-change或强行触发合成层，可能造成显存压力与反效果。 - 只谈方法不谈验证：没有指标与工具截图支撑的“优化”很难成立。