记录一下 link 与 @import 的区别和用法

一、引入形式

1. link引入

<link href="styles.css" type="text/css" />

2. @import进入

<style type="text/css">
    @import url("styles.css");
</style>

二、 不同点

1. 适用范围不同
   @import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。

2. 功能范围不同
   link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义rel连接属性，定义RSS等，@import就只能加载CSS。

3. 加载顺序不同
   页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）

4. 兼容性
   由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

5. 控制样式时的差别
   使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。

6. 使用DOM控制样式时的差别
   当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

7. 异步加载
   使用 link 标签异步加载样式表：

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="styles.css"></noscript>

通过将 rel 属性设置为 “preload”，样式表可以以异步方式加载，以提高页面加载性能。noscript 标签内的 link 标签是为了在不支持 JavaScript 的情况下提供回退。
@import 没有内置的异步加载机制，需要通过其他方式实现异步加载。

三、小结

link 标签是更常见、更灵活且性能更好的方法，而 @import 仍然可以在某些特定情况下使用，如果使用vue这样的前端框架，可以通过配合scoped属性实现样式的局部作用域，避免全局污染。