是唯一真正性能最优的CSS引入方式，因其支持并行下载、预加载、HTTP缓存及CDN分发；@import属CSS语法、串行阻塞且无法预加载；无网络请求但不可缓存、不复用。
<link rel="stylesheet"> 是纯静态 HTML 网页中唯一真正性能最优的 CSS 引入方式。其他所谓“方式”要么不参与资源加载、要么天然串行阻塞，根本不在同一性能维度上。
为什么 <link rel="stylesheet"> 是唯一可并行加载的方案
浏览器在 HTML 解析阶段遇到 <link rel="stylesheet">，会立即发起 HTTP 请求，并行下载；同时它能被预加载器（preload scanner）识别，支持 as="style"、media 条件加载、HTTP 缓存复用和 CDN 分发。
- 漏写
rel="stylesheet"—— 浏览器直接忽略该标签，控制台无报错，但样式全失效 - 路径用
../css/main.css而非/css/main.css—— HTML 文件移动后 404，且无法通过构建工具统一重写 - 放在
底部 —— 触发强制重排（reflow），造成布局抖动（CLS），部分老浏览器（如 IE6）可能完全跳过解析
@import 在纯静态 HTML 中根本不能直接使用
@import 是 CSS 语法，不是 HTML 标签，不能写在 HTML 文件里。常见误用是把它塞进 <style></style> 块首行：<style>@import "theme.css";</style>。这会导致：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 必须等 HTML 下载完成、
<style></style>解析执行后，才发起theme.css请求 —— 多一次 TCP 往返 + 串行阻塞 - 无法被预加载器识别，
as="style"和preload对它完全无效 - IE6–IE8 会静默忽略带
media的@import，比如@import "print.css" print - 若
@import写在<link>后面，其引用文件仍可能晚于关键 CSS 生效，引发 FOUC（Flash of Unstyled Content）
<style></style> 标签不产生网络请求，但也不具备缓存能力
<style></style> 是内联样式容器，CSS 代码随 HTML 一起传输，无额外请求开销，但代价明确：
立即学习“前端免费学习笔记（深入）”；
- 无法利用 HTTP 缓存：每次访问都重传全部样式代码，gzip 压缩率也因缺乏重复模式而下降
- 不能复用：多个页面各自复制一份，改主题色就得改 N 次
- 调试困难：DevTools 中显示为
<style></style>，不带文件名，无法快速定位来源 - 禁用
@import：写在<style></style>里的@import仍受上述串行限制，且无法突破非缓存本质
真正影响性能的从来不是“选哪种引入方式”，而是 <link rel="stylesheet"> 是否放对位置、路径是否稳定、是否滥用 media 或错误配置 disabled。静态页没有服务端逻辑兜底，一个路径错误或属性遗漏，就等于整页样式不可见。
