面试题：CSS 优化和提高性能的方法有哪些？

这是一个非常经典的前端性能优化问题。CSS 虽然看似简单，但不当的写法会严重影响页面渲染性能。以下是一些关键的 CSS 优化和性能提升方法，按类别进行组织：

避免使用通配符和标签选择器作为关键选择器
- *, div, span 等选择器匹配范围太广，浏览器需要遍历大量 DOM 节点。
- 建议：使用 class 或 id 选择器，它们匹配效率更高。
避免深层嵌套
- #header .nav ul li a 这类深度嵌套的选择器，浏览器需要从右到左逐层匹配，效率低下。
- 建议：尽量扁平化结构，使用语义化的 class 名（如 .nav-link）。
避免使用属性选择器和伪类选择器过度
- [type="text"], :not(), :nth-child() 等选择器计算成本较高。
- 建议：在必要时使用，并尽量结合 class 选择器缩小范围。

减少重排（Reflow）和重绘（Repaint）
- 重排：改变元素几何属性（如宽高、位置）会触发页面重新布局，成本极高。
- 重绘：改变非几何属性（如颜色、背景）会触发重新绘制，成本次之。
- 优化策略：
  - 避免频繁操作样式：使用 className 一次性替换样式，而不是逐个修改 style 属性。
  - 使用 transform 和 opacity：这两个属性触发的是 合成（Composite），通常由 GPU 处理，性能最好。适合做动画。
  - 避免在动画中修改布局属性：如 top, left, width, height 会触发重排。
启用硬件加速（GPU 加速）
- 对需要动画的元素，使用 transform: translateZ(0) 或 will-change: transform 告诉浏览器提升到合成层。
- 注意：不要滥用，过多的合成层会消耗内存。
使用 contain 属性
- contain: layout; 或 contain: strict; 可以告诉浏览器该元素的布局、样式、绘制等是独立的，减少浏览器的渲染计算范围。

减少 CSS 文件体积
- 删除未使用的 CSS 规则（可借助工具如 PurgeCSS、UnCSS）。
- 压缩 CSS 文件（移除空格、注释，使用工具如 cssnano）。
- 合并小文件（减少 HTTP 请求）。
关键 CSS 内联（Critical CSS）
- 将首屏渲染所需的 CSS 内联到 <head> 的 <style> 标签中，避免阻塞渲染的外部请求。
- 其余 CSS 异步加载。
异步加载非关键 CSS
- 使用 rel="preload" 或动态创建 <link> 标签加载非首屏 CSS，避免阻塞页面渲染。
合理使用 @import
- @import 会阻塞 CSSOM 构建，且可能造成额外的请求延迟。
- 建议：优先使用 <link> 标签引入 CSS。

使用 font-display 控制字体加载
- 避免 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）。
- 例如：@font-face { font-display: swap; }
优化图片和背景
- 使用合适的图片格式（WebP/AVIF）。
- 背景图使用雪碧图（Sprite）减少请求数。
- 懒加载非首屏背景图。
避免使用 @font-face 加载过多字体变体
- 只加载实际需要的字体（如 regular, bold），减少资源消耗。

CSS 性能优化的核心思想是：

在实际项目中，应结合性能分析工具（如 Chrome DevTools 的 Performance 面板）来定位和解决具体的性能瓶颈。

THE END