@import 会导致页面白屏，因其同步阻塞样式解析与渲染，须等导入文件下载解析完毕；而 link 支持异步预加载且不阻断渲染。
@import 为什么会让页面白屏几秒
因为 @import 是 CSS 中的同步阻塞加载机制，浏览器遇到它会暂停后续样式解析和渲染，直到导入的外部文件下载、解析完成。这和 <link rel="stylesheet"> 的异步预加载完全不同——后者能并行下载，且不阻断渲染。
- 在
<style>块里写@import url("theme.css");，等同于把请求“塞进” CSS 解析流水线末端 - 如果放在 CSS 文件顶部，还可能触发多次重排（尤其带
@media条件时） - Chrome DevTools 的 Network 面板里能看到它被标为 “blocking”，而
<link>请求是 “initiator: parser”
@import 放在 CSS 文件里 vs 放在 <style> 标签里有区别吗
有，但不是功能差异，而是加载时机和作用域规则不同。
- 放在外部 CSS 文件中（如
main.css）：受该文件加载顺序影响；若该文件本身用<link>引入，则@import的资源会排队等它下载完才发起请求 - 放在 HTML 的
<style>标签内：属于内联样式块的一部分，解析到那一行才开始 fetch，且无法利用 HTTP 缓存复用（除非响应头明确支持） - 两者都不支持
as="style"或fetchpriority等现代资源提示属性
@import 能否条件加载（比如只在 print 时引入）
可以，但必须写成带媒体查询的形式：@import url("print.css") print;，否则默认是 all。
- 支持的媒体类型包括
screen、print、speech，也支持媒体特性表达式，例如@import url("mobile.css") (max-width: 768px); - 注意：多个条件用逗号分隔表示“或”，空格分隔表示“且”，但部分旧浏览器（IE9 之前）不支持带媒体查询的
@import - 动态切换媒体类型（如 JS 修改
media属性）对@import无效——它只在首次解析时生效
@import 和 link 在 HTTP/2 下还值得纠结吗
依然值得。HTTP/2 的多路复用确实缓解了连接数限制，但 @import 的语义阻塞问题没变。
立即学习“前端免费学习笔记（深入）”；
- 即便所有资源走同一个 TCP 连接，浏览器仍要按 CSS 规则树顺序执行，
@import后面的声明无法提前应用 - 构建工具（如 Webpack、Vite）通常会把
@import内联展开，但开发时保留它容易掩盖真实加载路径，调试困难 - 真正省事的做法是：用
<link rel="preload" as="style" href="xxx.css">+<link rel="stylesheet" href="xxx.css">组合替代
最常被忽略的一点：CSS 文件里写了 @import，但对应 URL 返回 404，整个文件的后续样式都会失效——连同本该生效的本地规则也会被丢弃，而不是跳过错误继续解析。
