在网页开发中，引入CSS文件主要有两种手段：一种是使用HTML的<link>标签，另一种是在CSS内部使用@import规则。虽然它们最终都能把样式应用到页面上，但在浏览器的加载机制、渲染表现以及工程维护方面存在本质不同。理解这些区别，有助于我们在不同场景下做出合理选择。
一、基本用法与语法差异
<link>是标准的HTML标签，通常写在文档的<head>区域，用来建立当前文档与外部资源的关系。它不仅能引入样式表，还可以定义媒体类型、预加载资源等。下面是一个最常见的link写法：
<head> <link rel="stylesheet" type="text/css" href="base.css"> <link rel="stylesheet" type="text/css" href="theme.css" media="screen"> </head>
而@import是CSS语言自身的指令，必须出现在样式表的最前面（除@charset外）。它的作用是通知浏览器在加载完当前CSS文件后，再去获取另一个CSS文件。示例代码如下：
/* main.css */
@import url("reset.css");
@import "layout.css" screen and (min-width: 800px);
body {
font-size: 14px;
}
从语法层面看，link属于结构层引入，不依赖CSS解析；@import则嵌套在样式表逻辑中，必须等待父级样式表可用后才会生效。这种先后依赖关系，是两者性能表现分化的根源。
二、加载机制与渲染性能
当浏览器解析HTML时，遇到<link rel="stylesheet">会立即并行发起HTTP请求，多个link之间的下载互不阻塞（在HTTP/1.1下受同域连接数限制，但依然早于样式计算）。样式文件就位后，浏览器结合DOM生成渲染树。由于link在HTML解析阶段就已触发，它不会额外推迟首屏绘制太多。
<!-- 并行请求 a.css 与 b.css --> <link rel="stylesheet" href="a.css"> <link rel="stylesheet" href="b.css">
相反，@import的请求是串行潜伏的。浏览器要先下载包含@import语句的CSS，解析到该规则，再发出新请求。假设main.css里导入了三个文件，用户实际看到的样式生效时间等于这些文件依次或继发传输的总耗时。在弱网情况下，页面可能先以无样式或局部样式闪现，随后重排，体验明显劣于link。
/* 以下导入会造成串行依赖 */ @import "a.css"; @import "b.css"; @import "c.css";
性能剖析表明，将@import改为link或使用打包工具合并CSS，往往能缩短关键渲染路径。现代构建链如Webpack、Vite也默认把分模块样式内联或打成一个文件，目的就是规避@import带来的请求瀑布。
三、DOM可控性与脚本交互
link作为DOM节点，可以用JavaScript动态创建、修改或移除，从而实时切换主题或按需加载皮肤。例如下面代码在用户点击时插入新样式表：
function loadSkin(url) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
loadSkin('dark.css');
@import则难以被脚本直接操纵。它深埋在CSS文本里，若要改变导入目标，只能重写整个样式文件内容或替换style标签，成本高且容易引发闪烁。此外，link支持disabled属性，可一键关闭某样式表，而@import没有等价开关。
在需要运行时切换多套视觉方案的系统中，比如后台管理系统的明亮与暗黑模式，基于link的控制方案更健壮。很多组件库也采用动态link来做主题换肤，而不是在核心css里写满@import。
四、兼容性与媒体查询支持
link通过media属性原生支持条件加载，浏览器在不匹配媒体时会降低请求优先级甚至不应用，但不会阻塞其他资源。写法直观：
<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">
@import同样可以在语句后写媒体条件，但旧版IE（如IE5/6部分实现）对@import支持不完整，且所有@import不论媒体是否匹配，在老引擎里都可能强行请求。虽然现代浏览器已修复大部分问题，但在兼容性要求严苛的项目里，link仍是更保险的做法。
| 对比维度 | link标签 | @import规则 |
|---|---|---|
| 所属规范 | HTML | CSS |
| 加载时机 | HTML解析时并行 | 父CSS解析后串行 |
| JS控制 | 方便增删改 | 极难动态干预 |
| 兼容性风险 | 极低 | 老旧浏览器异常 |
五、工程实践建议
日常构建阶段，推荐使用预处理器的@import仅做源码层面的拆分，而在编译输出时由工具将其合并成单一文件，避免线上出现原生@import请求。如果必须在运行时分离样式，优先采用link标签配合动态插入。
/* 开发期使用，构建后会被打包器内联 */ @import "variables.scss"; @import "mixins.scss";
总结来说，link在性能、可控性、兼容性上全面占优；@import仅适合作为源码组织手段或在极简单静态页中做样式拆分。面对首屏速度和用户体验的硬指标，开发者应默认选择link，把@import关进构建工具的笼子里。