link和@import有什么区别

zhenglin

2026年1月6日 11:27 本文热度 387

这是一个非常经典的前端问题。<link> 和 @import 都是用来引入外部 CSS 文件的方法，但它们在加载机制、性能、兼容性和控制力上有显著区别。

简单来说：现代 Web 开发中，强烈推荐使用 <link> 方法，避免使用 @import。

下面是详细的对比：

<link> ：假设你在 HTML 中写了两个 <link> 标签。浏览器会同时请求这两个 CSS 文件。它们和页面的 HTML、图片等资源一起并行下载。
@import：假设在 main.css 文件中写了 @import url("imported.css")。浏览器必须先下载 main.css，然后解析它，读到 @import 语句时，才去下载 imported.css。

这形成了一个“请求链” ，严重拖慢页面渲染速度。如果 imported.css 里又 @import 了其他文件，情况会更糟。

两者都会阻塞渲染，浏览器需要知道样式规则才能正确绘制页面。但 @import 因为其串行加载的特性，会导致浏览器开始渲染的时间点更晚。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="global.css">
</head>
<body></body>
</html>

/* 在 global.css 文件中 */
@import url("reset.css"); /* 必须写在第一行 */
@import url("components.css");


body { font-size: 16px; } /* 自己的规则写在下面 */

尽量避免使用 @import。

使用 <link> 标签来引入所有主要的 CSS 文件。这是性能最佳、兼容性最好、也最可控的方式。

@import 的合理使用场景（较少）：

在 CSS 预处理器中：在 Sass/Less 文件中使用 @import 来合并模块文件是可以接受且推荐的，因为预处理器会在编译阶段将这些 @import 的文件合并成一个最终的 CSS 文件输出给浏览器，浏览器最终看到的仍然是一个由 <link> 引入的单一文件，避免了性能问题。
非常特殊的需求：例如需要根据某些媒体查询条件来有选择地加载样式表，但又希望将这些逻辑写在 CSS 内。不过，现代 <link> 标签的 media 属性也能很好实现。

性能优化进阶：
为了进一步优化，可以将多个 CSS 文件在构建阶段（使用 Webpack, Vite, Gulp 等工具）合并、压缩，然后用一个或少数几个 <link> 标签引入，减少 HTTP 请求数。

参考文章：原文链接

该文章在 2026/1/6 11:27:45 编辑过

关键字查询

link

port

区别

正在查询...