theme: cyanosis
1. 引言
今天看八股文中,看到了一个面试题: 简明说一下 CSS 中 link 与 @import 的区别和用法？. 再经过实践之后, 决定写一篇文章, 一方面加深自己的理解,同时方便其他掘友进行学习.
2. link 以及@import 的介绍和用法
2.1 link 标签的基本用法和目的
基本用法：link 标签是 HTML 的一部分，用于将外部资源（如 CSS 样式表、网站图标等）链接到 HTML 文档中。要使用 link 标签引入 CSS 文件，你需要在 HTML 文档的 <head> 部分添加一个 link 元素，并设置相应的属性：
<head>
<link rel="stylesheet" href="styles.css">
</head>
在这里，rel="stylesheet" 表示链接的是一个样式表，href 属性指定了样式表的 URL 路径。
目的：link 标签的主要目的是将 CSS 样式应用到 HTML 文档中。通过外部样式表，你可以将样式信息与 HTML 内容分离，便于维护和重用。此外，link 标签还用于其他目的，如定义网站图标（rel="icon"）或预先加载资源（rel="preload"）等。
2.2 @import 规则的基本用法和目的
基本用法：@import 是 CSS 提供的一种机制，允许在一个 CSS 文件中导入另一个 CSS 文件。要使用 @import，你需要在 CSS 文件的开头（任何其他规则之前）添加一个 @import 规则，指定要导入的样式表的 URL：
@import url('another-styles.css');
或者，你也可以在 style 标签中直接使用 @import：
<style>
@import url('another-styles.css');
/* 其他 CSS 规则 */
</style>
3. 两者的区别以及优缺点
下面我们分别从
加载顺序,是否可以动态引入,优先级别,用途,性能,权重和层叠,兼容性几个方向展开阐述
3.1 加载顺序
我们新建三个css文件, 两个使用link方式引入, 一个使用@import 方式引入. 在浏览器网络选项卡进行测试,发现link引入的资源会首先请求, 随后才是@import资源请求
结论:
link：作为 HTML 元素，在页面加载过程中，link引用的 CSS 文件会与页面并行加载，这意味着 CSS 文件可以在 HTML 文档解析的同时开始下载，从而加快页面渲染速度。@import：当使用@import在 CSS 文件中导入其他样式表时，被导入的样式表将在页面加载完毕后被加载。这可能导致页面内容的呈现出现延迟，因为浏览器需要先解析完整个 HTML 文档才能下载 CSS 文件。
3.2 是否支持动态导入
link
因为link 属于HTML文档元素, 所以可以通过js动态创建插入.
const link = document.createElement('link')
// 设置 rel 属性为 stylesheet
link.rel = 'stylesheet';
// 设置 href 属性为 CSS 文件的 URL
link.href = './link.css';
// 将 link 元素添加到 head 元素中
document.head.appendChild(link);
@import
@import CSS@规则，用于从其他样式表导入样式规则。因为它不是html 元素, 因此无法通过DOM API 进行创建. 但是我们可以使用创建style标签,通过动态创建文本节点,然后将这个文本节点插入到style标签中, 也可以实现加载css资源.
// 创建一个新的 style 元素
const style = document.createElement('style');
// 创建一个 @import 规则的字符串
const importRule = '@import url("./link.css");';
// 将 @import 规则添加到 style 元素的内容中
style.appendChild(document.createTextNode(importRule));
// 将 style 元素添加到 head 中
document.head.appendChild(style);
结论:
link：可以通过 js, 动态创建 link 元素并添加到 DOM 中，从而可以动态加载 CSS 文件
@import：不能直接通过 DOM 操作动态创建 @import 规则，但可以通过动态创建 style 元素并插入包含 @import 规则的样式来间接实现动态加载 CSS 文件的效果.
3.3 用途
link：<link>标签不仅可以用来加载 CSS，还可以用来链接网站图标、预加载资源等，是多功能的标签。
<link rel="stylesheet" href="./link.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
@import：@import仅用于 CSS 文件中导入其他样式表，功能单一。
3.4 性能
link：由于并行加载的特性，link在性能上通常更优。@import：多个@import语句会导致多个网络请求，增加了页面的加载时间。
3.5 兼容性
@import是css2.1引入，只有高版本的IE浏览器支持（大于IE5版本以上的)
4. 总结:
link 是引入 CSS 的首选方式，因为它提供更好的性能和更广泛的兼容性。而 @import 可以在需要将样式拆分成多个文件时使用，但需要注意其潜在的性能影响。
