link和@import有什么区别

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

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

下面是详细的对比：

特性	`<link>` 标签 (HTML)	`@import` 规则 (CSS)
归属	HTML 标签，位于 `<head>` 中。	CSS 语法，必须写在 CSS 文件或 `<style>` 标签的开头。
语法	`<link rel="stylesheet" href="style.css">`	`@import url("style.css");`
加载机制	并行加载。浏览器在解析 HTML 时遇到 `<link>` 会立即发起对该 CSS 文件的请求，不会阻塞 HTML 的继续解析（但会阻塞渲染，以确保样式正确应用）。	串行加载。浏览器需要先下载并解析包含 `@import` 的 CSS 文件，然后才发现并开始下载被导入的 CSS 文件。这会显著增加页面整体加载时间。
DOM 可控性	可以被 JavaScript 动态操作。例如，可以通过 JS 创建、修改或删除 `<link>` 元素来切换样式表。	无法用 JavaScript 直接控制或删除。一旦通过 `@import` 引入，就很难动态修改。
兼容性	完美兼容所有浏览器（包括非常古老的浏览器）。	CSS2.1 的特性。在 IE5+ 上基本支持，但仍有细微的兼容性问题。
性能影响	更优。允许多个 CSS 文件并行下载，有利于加快页面加载速度。	较差。容易引起资源加载的串行化，导致页面渲染延迟，特别是在网速慢或文件多时。
预加载扫描器	可以被捕获。现代浏览器的"预加载扫描器"会快速扫描 HTML，提前发现 `<link>` 并开始下载资源。	无法被捕获。预加载扫描器通常不解析 CSS 文件内部的 `@import`，因此无法提前发现这些资源。
用途限制	不仅可以引入 CSS，还可以引入网站图标、预加载资源、定义 RSS 源等（通过 `rel` 属性）。	仅用于引入 CSS。

核心区别详解

1. 加载顺序与性能（最关键的区别）

<link> ：假设你在 HTML 中写了两个 <link> 标签。浏览器会同时请求这两个 CSS 文件。它们和页面的 HTML、图片等资源一起并行下载。
@import ：假设在 main.css 文件中写了 @import url("imported.css")。浏览器必须先下载 main.css，然后解析它，读到 @import 语句时，才去下载 imported.css。这形成了一个"请求链" ，严重拖慢页面渲染速度。如果 imported.css 里又 @import 了其他文件，情况会更糟。

2. 渲染阻塞

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

3. 如何使用与书写位置

<link> ：写在 HTML 的 <head> 部分。

html 复制代码

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

@import ：写在 CSS 文件或 <style> 块的最顶端（在其它规则之前）。

css 复制代码

/* 在 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 请求数。