link 和 @import 的区别

作用

1. 类型

• link 是 HTML 标签
• @import 是 css 提供的

2. 加载顺序

• link 是页面载入的时候同时加载。
• @import 需要网页完全加载完成才会加载

3. 兼容性

• link 全支持
• @import 是 CSS2.1 提出的，低版本的浏览器不支持。

4. 操作

• link 可以通过 js 去异步载入
• @import 不支持 js 去载入

注意

less 、 scss 等中也存在 @import 语句，这个语句和 css 的@import 的区别？

1. 语法

• css 中的@import 是 css3 支持 At 规则(@document,@import,@supports,@media)中的一个，语法结构为 @import url(xxx);
• less、scss 中的@import 是这些预编译语法支持的 其语法结构为 @import "xxx";

2. 结果

• css 中的@import生成的最后物料仍然是 @import,且在网页载入完成后才会通过 url 加载。

• less 中的@import是 less 等提供的语法结构，依赖于开发环境进行转换成 css，且最后生成的物料也会是将文件内容作为整体插入此 css 文件中，或通过 webpack 等插入一个公共的 css 文件中

// less 中引入文件还支持关键词
@import (optional, reference) "foo.less";