避免 @import

@import 在 CSS 中引入其他样式表，但存在性能问题。

问题分析

串行加载

/* style.css */
@import url('reset.css');
@import url('base.css');
@import url('components.css');

浏览器加载流程：

1. 加载 style.css
2. 解析发现 @import
3. 串行加载 reset.css
4. 解析发现下一个 @import
5. 串行加载 base.css ...

结果：多个请求串行执行，总时间累加。

阻塞渲染

<link rel="stylesheet" href="style.css">

style.css 中的 @import 样式会阻塞渲染，直到所有导入文件加载完成。

正确做法

使用 link 标签

<!-- 好：并行加载 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">

多个 link 标签并行加载，总时间取最慢的一个。

预加载优化

<!-- 预加载关键 CSS -->
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="critical.css">

对比总结

何时可以使用 @import

仅在 CSS 预处理或构建工具中使用：

// Sass/SCSS 中使用 @import（编译时合并）
@import 'variables';
@import 'mixins';
@import 'components';

构建工具会将多个文件打包成一个，不存在运行时串行问题。

要点总结

• @import 导致串行加载，阻塞渲染
• 使用多个 link 标签实现并行加载
• 预加载关键 CSS 进一步提升性能
• 预处理中的 @import 在构建时合并，可正常使用