为什么使用@import而非link标签同步加载CSS会引起页面闪烁？
- 内容介绍
- 文章标签
- 相关推荐
本文共计964个文字，预计阅读时间需要4分钟。
`@import 不是 HTML 原生加载机制，它在 CSS 文件内部使用时，会强制串行解析：
更严重的是，IE 及部分旧版浏览器会等到 DOM 完全构建完毕后才执行 @import，此时 HTML 已开始渲染，但样式尚未就位——结果就是用户先看到裸 DOM，再“啪”一下套上样式，形成肉眼可见的闪动（FOUC）。
-
@import无法被<link rel="preload">或 HTML 解析器预加载识别 - 嵌套多层
@import（如 A.css → @import B.css → @import C.css）会让延迟呈指数级放大 - 即便放在
<head>里的<style>@import "...";</style>，也绕不开上述阻塞逻辑
用<link>替代@import的实操要点
把所有 @import 拆出来，改写成 <link rel="stylesheet"> 标签，并按依赖顺序从上到下排列在 <head> 中——这是最直接有效的解法。
本文共计964个文字，预计阅读时间需要4分钟。
`@import 不是 HTML 原生加载机制，它在 CSS 文件内部使用时，会强制串行解析：
更严重的是，IE 及部分旧版浏览器会等到 DOM 完全构建完毕后才执行 @import，此时 HTML 已开始渲染，但样式尚未就位——结果就是用户先看到裸 DOM，再“啪”一下套上样式，形成肉眼可见的闪动（FOUC）。
-
@import无法被<link rel="preload">或 HTML 解析器预加载识别 - 嵌套多层
@import（如 A.css → @import B.css → @import C.css）会让延迟呈指数级放大 - 即便放在
<head>里的<style>@import "...";</style>，也绕不开上述阻塞逻辑
用<link>替代@import的实操要点
把所有 @import 拆出来，改写成 <link rel="stylesheet"> 标签，并按依赖顺序从上到下排列在 <head> 中——这是最直接有效的解法。