在 HTML 页面中引入外部 CSS 样式文件，通常可以采用 <link> 标签和 @import 规则两种方式。两者虽然都能让浏览器加载指定的样式表，但它们在加载时机、资源类型、兼容性以及可操作性等方面存在本质区别。理解这些差异有助于开发者根据实际场景选择更合适的引入方案，从而避免样式延迟、渲染阻塞或维护困难等问题。
一、link 标签的引入方式与加载特点
<link> 是 HTML 原生提供的标签元素，通常放在 <head> 区域中，用来声明当前文档需要加载的外部资源。引入 CSS 时，通过设置 rel 属性为 stylesheet，并通过 href 属性指定样式文件的路径，浏览器就会在解析 HTML 的过程中识别该资源并开始加载。
从加载机制来看，<link> 标签加载 CSS 的过程与 HTML 的解析是并行的。也就是说，浏览器在解析文档、构建 DOM 树的同时，可以同时发起对多个 CSS 文件的请求，不会因为等待某一个样式文件而完全阻塞 HTML 的解析。这种并行加载方式有利于减少首屏渲染的等待时间，尤其适合在页面中引入多个样式文件。
下面是一个使用 <link> 标签引入外部 CSS 文件的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用 link 引入样式</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<div class="page">页面内容</div>
</body>
</html>
在这个示例中，页面同时引入了 base.css 和 layout.css 两个样式文件，它们会在解析 HTML 时并行请求，互不影响。
二、@import 规则的引入方式与限制
@import 是 CSS 语言自身提供的规则，主要用于在一个 CSS 文件中引入另一个 CSS 文件。它也可以放在 HTML 文档的 <style> 标签内部使用，但无论哪种场景，@import 规则都必须出现在所有其他样式规则之前，否则浏览器会忽略该引入指令。
与 <link> 标签不同，@import 引入的 CSS 属于串行加载。浏览器需要先加载并解析当前包含 @import 的样式文件，然后才会发现并请求被引入的其他样式文件。如果页面中同时存在多层 @import，各个样式文件会按照依赖顺序依次加载，这可能导致样式渲染出现不必要的延迟。
以下代码展示了在一个主 CSS 文件顶部使用 @import 引入其他样式文件的正确位置：
/* 必须放在文件顶部，位于所有普通规则之前 */
@import url("reset.css");
@import url("theme.css");
/* 普通样式规则可以正常编写 */
body {
margin: 0;
font-family: sans-serif;
}
在 HTML 的 <style> 标签中使用 @import 时，也需要将它放在标签内容的最顶部，否则同样会被忽略。下面是一个对应的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用 @import 引入样式</title>
<style>
@import url("base.css");
@import "theme.css";
body {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>示例页面</h1>
</body>
</html>
需要注意的是，@import 只能用于引入 CSS 资源，无法像 <link> 那样加载图标、预加载资源或其他类型的外部文件，因此它的使用场景相对比较受限。
三、link 与 @import 的核心差异
1. 加载机制不同
<link> 标签引入的 CSS 文件会和 HTML 解析过程并行加载，多个样式文件可以同时请求，不会形成明显的串行等待而 @import 的加载时机要晚得多。浏览器必须先下载并解析包含它的那个 CSS 文件，发现 @import 语句之后，才会发起新的请求去获取被引入的样式表。如果存在多层 @import，请求还会像链条一样逐层展开，后面的资源必须等前面的资源返回并解析后才能被发现，容易形成明显的串行延迟。
可以简单理解为：@import 把“等待”藏在了 CSS 内部。表面上看 HTML 只有一份样式请求，实际请求数并没有减少，反而可能因为延迟发现而拖慢首屏渲染。
2. 渲染阻塞与首屏性能不同
<link> 加载 CSS 时会阻塞页面渲染，但不会阻塞 HTML 的解析和下载。因为浏览器可以并行下载多个 <link> 资源，所以只要合理控制数量，首屏等待时间通常是可预期的。
@import 则会造成更明显的阻塞。主样式表必须先被下载、解析，浏览器才会知道还有另一个样式表要加载。在这之前，页面的渲染可能一直处于等待状态，尤其当主样式表体积较大或网络较慢时，白屏时间会明显增加。因此从首屏性能角度看，@import 通常不是最优选择。
3. DOM 可控性与 JavaScript 操作
<link> 是 HTML 元素，存在于 DOM 树中，可以通过 JavaScript 方便地读取、创建、移除或修改其 href、rel、media 等属性。例如动态切换主题时，可以直接替换 <link> 的地址。
const link = document.querySelector('link[rel="stylesheet"]');
link.href = 'dark-theme.css';而 @import 只是 CSS 中的一条语句，没有对应的 DOM 节点，无法用 document.querySelector 这类方法直接找到它。虽然可以通过修改 style 元素的文本内容来间接调整，但操作成本更高，不便于维护。
4. 加载优先级与依赖关系
浏览器对 <link> 的资源请求有比较清晰的优先级安排，尤其是位于 <head> 中的样式表，通常会被作为高优先级资源尽早获取。
@import 的资源优先级则取决于它所在的 CSS 文件何时被发现。如果主样式文件本身已经较晚加载，那么 @import 引入的样式只会更晚，浏览器也很难在首屏渲染前提前调度这些请求。依赖关系越深，加载时间越不可控。
5. 兼容性与构建策略
现代浏览器对 @import 的支持已经相当完善，但在一些旧版浏览器以及部分邮件客户端或嵌入式 WebView 中，仍可能出现解析不一致的情况。<link> 作为 HTML 原生标签，兼容性更稳定，使用时基本不需要考虑解析差异。
在实际工程中，更推荐的做法是：开发阶段可以用 @import 组织 CSS 模块，例如按功能拆分文件，便于维护；但在上线前应通过构建工具将多个 CSS 合并为一个或多个由 <link> 引入的文件，避免线上环境出现多层 @import 带来的额外请求延迟。
四、使用建议
综合来看，<link> 是加载外部样式表的首选方式。无论是从性能、兼容性，还是从 JavaScript 可控性的角度，它都更适合绝大多数网页场景。尤其是在首屏样式、基础样式和第三方公共样式的引入上，都应优先使用 <link>。
@import 更适合作为一种辅助手段，例如在已经加载的主样式表内部，根据条件引入少量补充样式，或者在开发阶段做临时模块拆分。但需要注意的是，除非经过构建工具处理，否则不要把大量样式拆成多层 @import 直接用于生产环境。
/* 开发阶段可读性较好的组织方式 */
@import url("base/variables.css");
@import url("base/reset.css");
@import url("components/button.css");
@import url("components/card.css");
/* 生产环境建议构建合并后通过 link 引入 */五、总结
<link> 与 @import 虽然都能把外部 CSS 引入页面，但它们的加载时机、渲染影响和可控性存在明显差异。<link> 更早被浏览器发现，能够并行加载，且作为 DOM 节点便于操作；@import 则需要等待所属样式表被解析后才会触发请求，多层嵌套时容易造成串行等待。
因此，在常规页面开发中应优先使用 <link>，把 @import 留给开发阶段的模块化组织，或经过构建合并后再交付给浏览器。理解两者的本质差异，有助于在性能优化和样式架构设计中做出更合理的决策。