【前端】【面试】在前端开发中，如何优化 CSS 以提升页面渲染性能？
题目：在前端开发中，如何优化 CSS 以提升页面渲染性能？
关键词总结
| 关键词 | 说明 |
|---|---|
| 选择器优化 | 避免通配符、减少层级深度、防止后代选择器过度嵌套 |
| 样式规则优化 | 合并重复规则、慎用高成本属性 |
| 加载与渲染优化 | 关键 CSS 优先加载、合理使用媒体查询 |
| 文件优化 | 压缩文件、按需加载 |
精炼总结
优化 CSS 提升页面渲染性能，需关注：
选择器简洁精准，样式规则精简高效，加载渲染策略得当，文件处理压缩按需，多方面协同优化，提升整体性能。
面试标准答法（分点展开）
- 选择器优化
- 摒弃通配符选择器：通配符
*会匹配页面所有元素，计算量庞大，严重影响性能，如* { margin: 0; padding: 0; }，应采用更具体选择器，像body { margin: 0; padding: 0; }。 - 降低选择器深度：选择器层级越深，浏览器匹配元素计算量越大，如
body div ul li a {... }，可简化为添加特定类名的选择器，如.specific - link {... }。 - 避免后代选择器过度嵌套：后代选择器（如
div p {... }）遍历所有后代元素匹配，若可能，用子代选择器（如div > p {... }）替代，缩小匹配范围。
- 摒弃通配符选择器：通配符
- 样式规则优化
- 合并重复样式：多个选择器有相同样式声明时合并，如：
.header {color: #333;font - size: 16px;
}
.footer {color: #333;font - size: 16px;
}
可优化为：
.header,
.footer {color: #333;font - size: 16px;
}
- **慎用昂贵属性**：像 `box - shadow`、`border - radius`、`transform` 等 CSS 属性计算和渲染成本高，非必要少用。使用 `box - shadow` 避免复杂效果，`transform` 虽有硬件加速，但复杂动画也可能致性能问题。
- 加载与渲染优化
- 关键 CSS 优先加载：将首屏渲染关键 CSS 置于 HTML 的
<head>标签内尽快加载，避免@import阻塞渲染，优先用<link>标签引入。 - 合理运用媒体查询：媒体查询置于样式表末尾，因浏览器从上到下解析样式表，可避免不必要计算。且在媒体查询中简化选择器，如：
- 关键 CSS 优先加载：将首屏渲染关键 CSS 置于 HTML 的
/* 较好写法 */
@media (max - width: 600px) {.simple - selector {font - size: 14px;}
}/* 较差写法 */
@media (max - width: 600px) {body div ul li a {font - size: 14px;}
}
- 文件优化
- 压缩 CSS 文件：借助 cssnano 等工具，去除注释、空格，缩短选择器和属性名，减小文件体积，加快下载。
- 按需加载 CSS：大型项目中，按功能模块拆分 CSS，依页面需求加载，避免加载大量不必要样式。如电商网站商品详情页仅加载商品展示相关 CSS。