link和@import区别

前端开发都知道 ，外部引入 CSS 有2种方式，link标签和@import。
但是它们有何本质区别？
本人项目中多数情况都使用link方式，但见过某些项目人，自以为@import高大上类似es6，极力吹捧使用@import，就此找了一些资料对此进行比较说明：
先上结论
慎用@import方式。可以避免考虑@import的语法规则和注意事项，以及不合理的引入顺序导致的资源文件下载顺序混乱和http请求过多。

区别1：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面。

区别3：
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：
link支持使用Javascript控制DOM去改变样式；而@import不支持。

顺便总结下在html中css有四种引入方式：

内联样式
内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效
示例：<div style="background:red"></div>
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个

拥有相同的样式，你不得不重复地为每个

添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入样式
嵌入方式也称页级CSS或内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。
示例：

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

外部样式
链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。
示例：

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入样式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：

或者写在css样式中

@charset “utf-8”;
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}

HTML加载过程：
　　　　1) 加载HTML-DOM结构

2)CSS和JS

3)图片和多媒体

4)加载事件触发

总结：　link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。

在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。