CSS 性能与工程化

1. 选择器性能排名（从快到慢）

选择器写法	性能等级	浏览器查找方式	2025-2026 推荐度	说明与建议
ID (#header)	★★★★★	直接查找	最高	最快，几乎瞬间定位
标签 (div, p)	★★★★☆	标签名查找	非常高	快，但页面元素多时略慢
类 (.btn)	★★★★	类名哈希表查找	高	日常最常用，性能很好
属性 ([type=”text”])	★★★	属性遍历	中等	比类慢，尽量少用
伪类 (:hover, :nth-child)	★★☆	元素遍历 + 计算	较低	:nth-child(n) 尤其慢，慎用
后代选择器 (div p a)	★★	从右往左逐层匹配	较低	层级越深越慢
子选择器 (ul > li)	★★★	比后代略快	中等	比后代好，但仍建议减少层级
通配符 *	★☆	匹配所有元素	极低	严重影响性能，禁止在样式表中使用

核心结论（请背诵）：
从右往左匹配 → 尽量让最右边的选择器最具体（ID > class > tag）
层级越浅越好 → 尽量不超过 3 层
避免 :nth-child(n)、*、很长的后代选择器

2025-2026 推荐写法：

/* 好 */
.header .nav-btn.active { ... }

/* 不好（性能差） */
div.container > section.main > div.content p.description span.highlight { ... }

2. 重排（Reflow）与重绘（Repaint）—— 性能杀手

重排：当document中的DOM节点的几何属性或者布局等影响，导致页面的元素需要重新排列，重排也叫回流，简单的说就是重新生成布局，重新排列元素。
重绘：当DOM节点的渲染的样式发生改变需要进行重新渲染，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。

操作类型	是否引起重排(Reflow)	是否引起重绘(Repaint)	性能代价	常见触发属性
几何属性变化	✓✓✓	✓✓✓	极高	width/height/margin/padding/top/left/…
布局结构变化	✓✓✓	✓✓✓	极高	display, position, float, overflow, flex 变化等
内容变化	✓✓	✓✓✓	高	textContent, font-size, line-height 等
可见性变化（不占位）	×	✓✓✓	中	visibility: hidden → visible
颜色/背景变化	×	✓✓	低	color, background, border-color, box-shadow
transform	×	×（大部分情况）	极低	translate, scale, rotate（合成层）
opacity	×	✓（但可合成）	低	0～1 变化

性能黄金法则:
能用 transform 就别用 left/top/width/height
能用 opacity 就别用 visibility/display
想批量修改 → 先 display:none → 修改 → display:block
想频繁读写 → 先读完所有布局属性，再统一写

经典优化写法：

// 坏：多次 reflow
element.style.width = '100px';
element.style.height = '200px';

// 好：批量修改
element.classList.add('resized');

3. 关键 CSS（Critical CSS）与首屏渲染优化

目标：FCP（First Contentful Paint）和 LCP（Largest Contentful Paint）最快
主流方案对比（2025-2026）

方案	实现难度	首屏速度提升	维护成本	推荐场景
内联关键 CSS	★★★	★★★★★	★★★	中小型站点、SSR 项目
提取关键 CSS + 异步加载其余	★★★★	★★★★★	★★☆	大型站点、追求极致性能
HTTP/2 + 预加载 + 关键 CSS	★★★★☆	★★★★☆	★★	现代项目标配
Tailwind JIT + Purge	★★☆	★★★★	★★★★★	快速开发 + 体积极小
推荐实践（2026年主流）：

<!-- 1. 关键 CSS 内联到 <head> -->
<style>
  :root { --primary: #6366f1; }
  body { margin:0; font-family:system-ui; }
  .hero { min-height:100vh; background:#000; color:white; }
  /* 只包含首屏所需 */
</style>

<!-- 2. 非关键 CSS 异步加载 -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

4. CSS 加载策略对比（工程化必知）

加载方式	是否阻塞渲染	是否阻塞 JS 执行	推荐场景	备注
`<link rel="stylesheet">`	是	是	关键 CSS	传统方式
`<link rel="preload">`	否	否	高优先级 CSS/字体	提前获取但不执行
`<link rel="prefetch">`	否	否	下一页可能用到的 CSS	空闲时加载
`media="print" + onload`	否	否	非首屏 CSS	经典异步加载黑科技
JS 动态插入 link	否	否	按需/路由懒加载	React/Vue 项目常用

5. 样式重置与规范化（2025-2026 主流选择）

方案	文件大小	现代化程度	推荐指数	说明与建议
normalize.css	~4KB	高	★★★★☆	保留有用的浏览器默认样式，修复差异
reset.css	~1KB	中	★★☆	几乎全部清零，工作量大（不推荐新项目）
modern-normalize	~2KB	★★★★★	★★★★★	2024-2026 最流行，基于 normalize + 现代优化
Tailwind Preflight	内置	★★★★★	★★★★★	Tailwind 用户直接使用，无需额外文件
无重置	0KB	—	★★★☆	接受浏览器差异，适合极简/组件化项目
2026年推荐做法：

1
2
3

<!-- 最佳实践 -->
<link rel="stylesheet" href="https://esm.sh/modern-normalize@latest" />
<!-- 或直接复制 modern-normalize.css 到项目 -->

一句话总结：

性能三板斧：
选择器简单、层级浅
动画只用 transform + opacity
关键 CSS 内联 + 非关键异步加载