CSS 性能优化
通过内联关键 CSS、异步加载、选择器优化等方式提升页面渲染性能
问题
如何使用 CSS 提高页面性能？
解答
CSS 作为页面渲染和内容展现的重要环节，直接影响用户体验。以下是几种有效的优化方式。
内联首屏关键 CSS
将首屏关键 CSS 直接内联到 HTML 中，使浏览器下载完 HTML 后立即渲染，无需等待外部 CSS 文件下载。
<head>
<style>
/* 首屏关键样式 */
.header { height: 60px; background: #fff; }
.hero { min-height: 400px; }
</style>
</head>注意：只内联首屏必需的样式，大量 CSS 代码不适合内联，会增加 HTML 体积且无法缓存。
异步加载 CSS
非首屏 CSS 可以异步加载，避免阻塞页面渲染。
方式一：JavaScript 动态插入
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);方式二：使用 media 属性
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">方式三：使用 alternate
<link rel="alternate stylesheet" href="styles.css" onload="this.rel='stylesheet'">资源压缩
使用 webpack、gulp、rollup 等工具压缩 CSS 文件，减小文件体积，降低加载时间。
// webpack 配置示例
module.exports = {
optimization: {
minimize: true
}
};合理使用选择器
CSS 选择器匹配规则是从右往左，嵌套层级越多，匹配成本越高。
/* 不推荐：层级过深 */
#markdown .content .article h3 span { }
/* 推荐：简化层级 */
.article-title { }优化规则：
- 避免嵌套超过三层
- 使用 id 选择器时无需再嵌套
- 避免使用通配符和属性选择器
减少使用昂贵的属性
以下属性在重绘时会降低渲染性能，应谨慎使用：
box-shadowborder-radiusfilteropacity:nth-child
避免使用 @import
@import 会阻止浏览器并行下载，增加页面加载延迟。
/* 不推荐 */
@import url("reset.css");
/* 推荐：使用 link 标签 */<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">其他优化技巧
- 使用 CSS Sprite 合并小图标，减少 HTTP 请求
- 将小图标转为 base64 编码内联
- CSS3 动画优先使用
transform和opacity，避免使用left和top - 利用 CSS 继承特性，避免重复编写可继承属性
- 减少重排和重绘操作
关键点
- 内联首屏关键 CSS，异步加载非首屏样式
- 简化选择器层级，避免使用低效选择器
- 使用 link 标签而非 @import 引入样式
- 谨慎使用 box-shadow、filter 等昂贵属性
- 压缩 CSS 文件，合并图标资源
目录