link 与 @import 的区别

CSS 引入方式 link 和 @import 的对比

问题

在 HTML 中引入 CSS 有两种方式：<link> 标签和 @import 规则，它们有什么区别？

解答

基本语法

<!-- link 方式 -->
<link rel="stylesheet" href="style.css">

<!-- @import 方式 -->
<style>
  @import url('style.css');
  /* 或者 */
  @import 'style.css';
</style>

也可以在 CSS 文件中使用 @import：

/* main.css */
@import url('reset.css');
@import url('layout.css');

body {
  margin: 0;
}

区别对比

1. 从属关系

<!-- link 是 HTML 标签，不仅能加载 CSS -->
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="preload" href="font.woff2" as="font">

<!-- @import 是 CSS 语法，只能加载 CSS -->
<style>
  @import url('style.css');
</style>

2. 加载时机

<!DOCTYPE html>
<html>
<head>
  <!-- link: 页面加载时同时加载 CSS -->
  <link rel="stylesheet" href="a.css">
  
  <style>
    /* @import: 等页面加载完成后再加载 CSS */
    @import url('b.css');
  </style>
</head>
<body>
  <div class="box">内容</div>
</body>
</html>

3. 兼容性

<!-- link: 无兼容性问题 -->
<link rel="stylesheet" href="style.css">

<!-- @import: IE5+ 才支持 -->
<style>
  @import url('style.css');
</style>

4. DOM 可操作性

// link 可以通过 JavaScript 动态创建
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dynamic.css';
document.head.appendChild(link);

// @import 无法通过 DOM 操作动态插入

5. 权重问题

<head>
  <style>
    /* @import 的样式会被后面的 link 覆盖 */
    @import url('import.css'); /* .box { color: red; } */
  </style>
  <link rel="stylesheet" href="link.css"> <!-- .box { color: blue; } -->
</head>
<!-- 最终 .box 的 color 是 blue -->

性能影响

<!-- 不推荐：@import 嵌套会导致串行加载 -->
<!-- main.css -->
@import url('a.css');  <!-- a.css 加载完才加载 b.css -->
@import url('b.css');

<!-- 推荐：多个 link 可以并行加载 -->
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">

关键点

<link> 是 HTML 标签，@import 是 CSS 语法
<link> 并行加载，@import 串行加载（阻塞）
<link> 可通过 JS 动态插入，@import 不行
@import 必须写在 CSS 文件或 <style> 的最前面
实际开发中优先使用 <link>，性能更好