深入理解css中的link 和 @import

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资源请求

结论:

1. link：作为 HTML 元素，在页面加载过程中，link 引用的 CSS 文件会与页面并行加载，这意味着 CSS 文件可以在 HTML 文档解析的同时开始下载，从而加快页面渲染速度。
2. @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 可以在需要将样式拆分成多个文件时使用，但需要注意其潜在的性能影响。