是引入css的唯一可靠方式，因@import串行加载、无法并行、不支持条件加载与预加载、动态插入无效，且构建工具掩盖其运行时缺陷。
现代前端项目中，<link rel="stylesheet"> 是引入外部 CSS 的唯一可靠方式；@import 在运行时加载行为不可控、性能开销明确、且多数优化手段对其完全失效——它不是“次优选项”，而是应主动规避的遗留语法。
为什么 <link> 能并行下载而 @import 必须串行
浏览器在 HTML 解析阶段遇到 <link rel="stylesheet"> 就立即发起请求，并与其他资源（JS、图片）并发进行；@import 是 CSS 规则，必须等其所在样式表（无论是外部文件还是 <style></style> 块）完整下载并解析到该行，才开始下一个请求。
- 常见错误：一个
a.css里写@import url("b.css"); @import url("c.css");，实际加载顺序是 a → b → c，总耗时接近三者之和 - 即使把多个
@import写在同一个<style></style>标签顶部，浏览器仍按顺序执行，无法并行 - 实测（Chrome + 3G 模拟）：5 个 CSS 全用
<link>比嵌套 4 层@import快 300–600ms；弱网下首屏延迟可差 800ms+，直接影响 LCP
<link> 支持条件加载和预加载，@import 完全不支持
<link> 的 media 和 rel="preload" 属性能真正跳过不匹配资源的下载；@import 后面跟媒体查询只是“不应用”，文件照下不误。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 错误写法：
@import url("mobile.css") screen and (max-width: 768px);—— mobile.css 仍被下载，浪费带宽 - 正确写法：
<link href="mobile.css" media="screen and (max-width: 768px)">—— 不匹配时根本不发请求 - 关键 CSS 可提前拉取：
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">，@import无对应机制
动态插入和运行时控制只能靠 <link>
JS 创建并插入 <link> 元素会立刻触发请求并应用样式；动态往 <style></style> 里写 @import 字符串，浏览器静默忽略。
- 有效操作：
const link = document.createElement('link'); link.href = 'theme-dark.css'; link.rel = 'stylesheet'; document.head.appendChild(link); - 无效操作：
const style = document.createElement('style'); style.textContent = '@import url("theme-dark.css");'; document.head.appendChild(style);—— 控制台无报错，但样式不生效 - 框架（如 React）的 CSS-in-JS 方案底层也只操作
<link>或<style></style>，从不生成@import
最容易被忽略的一点：构建工具（Vite/Webpack）打包时合并 @import 是编译期行为，掩盖了原生加载语义缺陷；上线后若漏掉构建、或服务端直出未走构建流程，@import 的串行阻塞就立刻暴露。真实环境里，不能靠“反正会打包”来免责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
