使用@import会因串行加载导致渲染阻塞，而改用link标签可实现并行下载，提前触发资源请求，缩短关键渲染路径，提升页面首次渲染速度。

使用 @import 在 CSS 中引入多个样式文件会导致渲染阻塞，因为 @import 是串行加载的——浏览器必须先下载主 CSS 文件，再按顺序请求被导入的资源。这会延长关键路径，造成页面渲染延迟。

为什么 @import 影响性能？

@import 的本质是让 CSS 文件内部再去拉取其他资源，导致：

• 无法与 HTML 解析并行：@import 依赖主 CSS 下载完成才能触发后续请求
• 链式加载问题：多个 @import 会依次排队，形成“瀑布流”请求
• 阻塞渲染：直到所有导入的样式加载完毕，页面才开始布局绘制

用 替代 @import 实现并行加载

将样式引入从 CSS 层面移到 HTML 层面，利用浏览器对 的预加载扫描机制：

• HTML 解析时，浏览器能提前发现所有 link 标签并立即发起请求
• 多个 link 并行下载，不互相等待
• 更早进入关键渲染路径，缩短首次渲染时间

示例对比：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

❌ 不推荐：串行加载

/* main.css */
@import url('reset.css');
@import url('layout.css');
@import url('theme.css');

✅ 推荐：并行加载

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="theme.css">

进一步优化建议

• 合并小文件：减少 HTTP 请求次数，将非关键样式合并或异步加载
• 使用 media 属性分离：如 print 样式不会阻塞渲染
• 预加载关键资源：<link rel="preload"> 提升优先级
• 考虑内联首屏关键 CSS：避免外部请求延迟首屏渲染

基本上就这些。把样式加载从 CSS 的 @import 搬到 HTML 的 link 标签里，浏览器就能更快地并发处理，页面自然更早展现内容。不复杂但容易忽略。