应避免使用 @import 引入主样式表，因其导致串行加载、fouc、js不可控、无法被 document.stylesheets 访问、构建工具难分析等问题，而 link 具备并行加载、动态控制、响应式支持等优势。
别用 @import 引入主样式表，除非你明确知道它在做什么、且能接受它的副作用。 它不是 link 的平替，而是不同层级、不同加载机制、不同可控性的两种东西。
为什么 @import 会延迟渲染甚至出现 FOUC
@import 是 CSS 规则，不是 HTML 标签——这意味着浏览器必须先下载并解析完包含它的 CSS 文件（比如 main.css），才能开始请求它 @import 的那个文件（比如 reset.css）。这个过程是串行的，无法跳过。
常见表现包括：
- 页面 HTML 已解析完毕、文本已渲染，但样式仍是默认状态（白底黑字、无间距），100–300ms 后突然“闪”一下变样 → 这就是 FOUC（Flash of Unstyled Content）
- 嵌套
@import（A.css → @import B.css → @import C.css）→ 三步串行请求，首屏时间直接拉长 - 把
@import写在<style></style>块中间或底部 → 上方规则已生效，下方导入的样式覆盖不及时，造成局部样式错乱
link 支持动态控制，@import 几乎不可控
link 是 DOM 节点，可被 JavaScript 完全操作；@import 是 CSS 解析器内部行为，JS 拿不到、改不了、监听不了。
你能轻松做到这些：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
document.createElement('link')动态插入新样式表，并监听onload和onerror - 通过
media属性做响应式加载：<link rel="stylesheet" href="print.css" media="print"> - 配合
rel="preload"提前拉取关键 CSS：<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
而 @import 只支持一种写法：@import url("path.css") [media-query];，连缓存 bust（如 ?v=2.1）都要手动加，还容易因分号缺失导致整个规则失效。
document.styleSheets 里根本看不到 @import 加载的样式表
当你调用 document.styleSheets 获取当前所有 CSSStyleSheet 对象时，link 加载的会立刻出现在列表里，索引可查、规则可读；但 @import 导入的样式表不会被纳入该集合——它属于“子样式表”，只能通过 cssRules 逐层递归访问，且时机不可靠（可能还没解析完）。
这意味着：
- 你想用 JS 判断某个
@import是否加载完成？基本做不到 - 想用
CSSStyleSheet.disabled = true临时禁用某份导入样式？不行 - 构建工具（如 Vite、webpack）无法静态分析
@import路径，热更新、tree-shaking、预加载提示都会失效
最容易被忽略的一点：你在 <style></style> 里写 @import，看起来“只是换种写法”，其实已经把样式加载逻辑从 HTML 解析阶段拖到了 CSS 解析阶段——这个延迟对首屏性能的影响，远比多一个 HTTP 请求更隐蔽、更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
