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>，性能更好
目录