优化CSS性能需减少浏览器计算负担，核心是简化选择器、避免深层嵌套（如.header .nav ul li a:hover），优先使用类名（如.btn-primary），限制嵌套层级不超过3层，移除未使用样式（可用Chrome DevTools Coverage面板检测）；减少重排与重绘，动画优先采用transform和opacity以启用合成层；批量读写DOM属性，避免频繁修改style.cssText；关键CSS内联至，非关键CSS异步加载，禁用@import；启用Gzip/Brotli压缩；利用contain属性隔离布局影响，使用CSS自定义属性（如--color-primary）提升主题切换效率；媒体查询多用min-width以降低判断开销。根本在于提升浏览器处理效率而非单纯精简代码量。
CSS性能优化的核心是减少浏览器渲染时的计算负担，加快样式解析、布局和绘制速度。重点不在代码量多少，而在浏览器是否能高效处理。
精简选择器，避免深层嵌套
复杂选择器（如 .header .nav ul li a:hover）会让浏览器从右往左反复回溯匹配，拖慢样式计算。层级越深，开销越大。
- 优先用类名，少用标签和ID组合，例如用
.btn-primary替代button#submit.btn - 嵌套不超过3层，Sass/Less中避免无节制的嵌套
- 移除未使用的选择器，可用 Chrome DevTools 的 Coverage 面板识别
减少重排（reflow）与重绘（repaint）
修改影响布局的属性（如 width、top、display）会触发重排；改颜色、背景等只触发重绘。重排代价远高于重绘。
- 批量读写DOM：先集中读取所有offset/scroll值，再统一修改样式
- 对动画元素使用
transform和opacity，它们走合成层（compositor），不触发布局计算 - 避免频繁操作
style.cssText或循环设置单个样式
合理使用CSS文件加载策略
阻塞渲染的CSS会延迟首屏显示，尤其在移动端影响明显。
立即学习“前端免费学习笔记（深入）”；
- 关键CSS内联到
中（如首屏样式），非关键CSS用media="print"或onload动态加载 - 避免 @import，它会串行加载并阻塞解析
- 启用 Gzip/Brotli 压缩，删除空格、注释（构建工具可自动处理）
善用现代特性降低运行时开销
CSS本身也在进化，新特性往往更声明式、更高效。
- 用
contain: layout paint style明确隔离组件，限制浏览器样式和布局影响范围 - 用 CSS 自定义属性（
--color-primary）替代重复值，配合 JS 动态切换主题时更轻量 - 媒体查询尽量用
min-width而非max-width，减少条件判断次数
基本上就这些。不复杂但容易忽略——多数性能问题不在“写得多”，而在“算得笨”。
