【前端】【面试】在前端开发中，如何优化 CSS 以提升页面渲染性能？

题目：在前端开发中，如何优化 CSS 以提升页面渲染性能？

关键词总结

关键词	说明
选择器优化	避免通配符、减少层级深度、防止后代选择器过度嵌套
样式规则优化	合并重复规则、慎用高成本属性
加载与渲染优化	关键 CSS 优先加载、合理使用媒体查询
文件优化	压缩文件、按需加载

精炼总结

优化 CSS 提升页面渲染性能，需关注：

选择器简洁精准，样式规则精简高效，加载渲染策略得当，文件处理压缩按需，多方面协同优化，提升整体性能。

面试标准答法（分点展开）

1. 选择器优化
   • 摒弃通配符选择器：通配符 * 会匹配页面所有元素，计算量庞大，严重影响性能，如 * { margin: 0; padding: 0; }，应采用更具体选择器，像 body { margin: 0; padding: 0; }。
   • 降低选择器深度：选择器层级越深，浏览器匹配元素计算量越大，如 body div ul li a {... }，可简化为添加特定类名的选择器，如 .specific - link {... }。
   • 避免后代选择器过度嵌套：后代选择器（如 div p {... }）遍历所有后代元素匹配，若可能，用子代选择器（如 div > p {... }）替代，缩小匹配范围。
2. 样式规则优化
   • 合并重复样式：多个选择器有相同样式声明时合并，如：

.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` 虽有硬件加速，但复杂动画也可能致性能问题。

3. 加载与渲染优化
   • 关键 CSS 优先加载：将首屏渲染关键 CSS 置于 HTML 的 标签内尽快加载，避免 @import 阻塞渲染，优先用 标签引入。
   • 合理运用媒体查询：媒体查询置于样式表末尾，因浏览器从上到下解析样式表，可避免不必要计算。且在媒体查询中简化选择器，如：

/* 较好写法 */
@media (max - width: 600px) {
   .simple - selector {
        font - size: 14px;
    }
}

/* 较差写法 */
@media (max - width: 600px) {
    body div ul li a {
        font - size: 14px;
    }
}

4. 文件优化
   • 压缩 CSS 文件：借助 cssnano 等工具，去除注释、空格，缩短选择器和属性名，减小文件体积，加快下载。
   • 按需加载 CSS：大型项目中，按功能模块拆分 CSS，依页面需求加载，避免加载大量不必要样式。如电商网站商品详情页仅加载商品展示相关 CSS。