由link和@import的区别引发的CSS渲染杂谈
我们都知道，外部引入 CSS 有2种方式，link标签和@import。
它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提起。
如今，很多学者本着知其然不欲知其所以然的学习态度，不求甚解，只求结论。
所以，本文遵循 css hack 的渐进识别原则，
结论 → 区别 → 争议 → 细节 → 祖坟 → 感想，逐渐加深理论层级，
力争每个 level 的读者，都能 get 到自己想要的内容，不必继续阅读下去。
结论
就结论而言，强烈建议使用link标签，慎用@import方式。
这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
区别
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。
争议
不知从什么时候开始，当你在网上搜索link和@import的区别时，千篇一律的答案里就悄悄的多了一句“link引入的样式权重大于@import引入的样式”。
但是并没有一份答案，附带着对这句话的任何解释或实例。
这句话究竟是什么意思，该怎么理解呢？
发扬探索精神，我们不妨继续查阅资料。后来发现，还是有不少文章和帖子，对这句话表示质疑，进而自己写了 demo 去验证，验证的结果，确实无法与这句话相吻合。
而且，笔者也并未发现能清楚、正确、有理有据的解释这个结论到底对，还是不对的文章。
那么这个结论，最初是从哪里来的，可能已经无从考证了。
换个思维方式，不去争辩它的对错了，探索未果，我们就从这个结论的核心关键词“权重”出发，去研究它。
说到“权重”，有必要再解释一下：CSS 中的权重，指的是选择器的优先级。
CSS 选择器的权重高，即选择器的优先级高。
CSS 的优先级特性表现为，对同一 HTML 元素设置样式时，不同选择器的优先级不同，优先级低的样式将被高优先级的样式层叠掉。
CSS 权重优先级顺序简单表示为：
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
为了便于理解权重的计算方式，我们按以下方式进行数值假设分析：
| 选择器 | 权重 |
|---|---|
| 通配符 | 0 |
| 标签 | 1 |
| 类/伪类/属性 | 10 |
| ID | 100 |
| 行内样式 | 1000 |
| important | 1/0(无穷大) |
再举实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#myid { /* id选择器权重为100 */
background-color: pink;
}
#divid .myspan input { /* 权重为 100 + 10 + 1 = 111 */
background-color: yellow;
}
input[type="button"] { /* 权重为 10 */
color: white !important; /* !important权重为无穷大 */
}
input.myclass { /* 此为标签指定式选择器，权重为 1 + 10 = 11 */
color: black;
}
</style>
</head>
<body>
<div id="divid">
<span class="myspan">
<input type="button" id="myid" class="myclass" name="myname"
value="点我" style="background-color: blue; color: green;">
<!-- style样式的权重为1000 -->
</span>
</div>
</body>
</html>
每个样式的权重值，都在实例中，以注释的形式标明。
根据权重值可知，最终，这个按钮的样式一定是，蓝色背景，白色字，结果如下图:
存在!important时，不作他想，一定是权重最大的样式。
既然我们了解了，CSS 中的权重是怎么回事，那回到主题，“link引入的样式权重大于@import引入的样式”，
难道 CSS 的引入方式也有权重吗？其实我们不必纠结它是否有权重之说，我们只需理论结合实际的去分析，各种情况下，结果如何即可。
现有如下3个css文件：
/* green.css */
div {
background-color: green;
border: 3px solid red;
}
/* yellow.css */
div {
background-color: yellow;
border: 3px solid black;
}
/* blue.css */
@import url("green.css");
div{
background-color: blue;
}
实例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例1. link标签引入yellow.css，内联样式引入green.css -->
<link rel="stylesheet" href="yellow.css">
<style type="text/css">
@import url("green.css");
</style>
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为，绿色背景，红色边框，即green.css生效 -->
</body>
</html>
实例1结果如下图：
实例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例2. 内联样式引入green.css，link标签引入yellow.css -->
<style type="text/css">
@import url("green.css");
</style>
<link rel="stylesheet" href="yellow.css">
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为黄色背景，黑色边框，即yellow.css生效 -->
</body>
</html>
实例2结果如下图：
对比实例1和实例2这两个正好相反的结果可知，link和@import并没有产生类似权重的效果，只是单纯的体现了CSS的层叠性，写在后面的样式，覆盖前面的样式。
实例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例3. 内联样式引入green.css，内联样式中设置粉色背景 -->
<style type="text/css">
@import url("green.css");
div {
background-color: pink;
}
</style>
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为粉色背景，红色边框，即green.css已生效，但背景色被内联样式层叠为粉色 -->
</body>
</html>
实例3结果如下图：
实例4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例4. link标签引入blue.css，blue.css中引入green.css -->
<link rel="stylesheet" href="blue.css">
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为蓝色背景，红色边框，即green.css已生效，但背景色被blue.css层叠为蓝色 -->
</body>
</html>
实例4结果如下图：
分析实例3和实例4的结果可知：
对于实例3，我们看到红色边框，证明内联样式中使用@import引入的green.css已经生效，但其背景样式被内联样式中的粉色背景层叠掉，这个现象表明，@import不只是如我们看到的那样，处于内联样式顶部，其被引入的样式，在结构上，也确实是被置于内联样式之前，所以内联样式才能够层叠掉它。
同理，实例4中，在link标签引入的blue.css文件内，顶部同样存在@import引入的green.css，红色边框依然可以证明，green.css已经生效，但其背景样式被blue.css本身的蓝色背景层叠掉，@import引入的样式在blue.css中也是被置于它本身样式之前的。
到此为止，我展开了大胆的猜想，“link引入的样式权重大于@import引入的样式”，这个结论的给出者，是想告诉大家：
在link标签引入的 CSS 文件中，使用@import时需注意，如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link标签引入的样式权重大于@import引入的样式这样的直观效果。
对于我设想的结论，似乎挺能说通的，毕竟这是实践出的结果。
那些验证过此结论的前人，他们都是在一个 HTML 页面中，一前一后分别使用link和内联样式的@import去比较的，我在实例1和实例2中也是如此做的，并不能反推出“link引入的样式权重大于@import引入的样式”这个结论，所以，我不自量力的认为，这个结论其实最初只是丢了个已知条件而已。
那么我们一起把这个结论重新梳理一下：在link标签引入的 CSS 文件中使用@import时，相同样式将被该 CSS 文件本身的样式层叠。
Ps.首先感谢各种看官的阅读。笔者属于学习阶段，学识尚浅，虽然本文结论已得到笔者编码验证，但不排除笔者大脑短路、措辞有误的可能，有缘阅读到此处的都是真爱，希望诸位大拿、大牛、大仙、大圣、大神们不吝赐教，及时指正，避免诱导萌新误入歧途，再次向你们表达笔者的谢意！
细节
既然已经说了这么多，就顺便提一下关于@import使用时的其它细节。
在《CSS权威指南》中写道：
@import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略，而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。
到此为止，似乎事情都弄清楚了，但是突然又有个疑点浮现出来：
在讨论区别的时候，不是说加载页面时，link标签引入的 CSS 先于@import引入的 CSS 加载吗，那link标签引入的样式又怎会把@import引入的样式层叠掉呢？
要回答这个问题，首先我们要一起明确一些有关浏览器的概念：
浏览器执行过程可以简单分为加载、解析、渲染，这三个步骤。
加载：根据请求的URL进行域名解析，向服务器发送请求，接收响应文件（如 HTML、JS、CSS、图片等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，构建相应的内部数据结构（比如HTML的DOM树，JS对象的属性表，CSS的样式规则等）。
渲染：构建渲染树，对各个元素进行位置计算、样式计算等，然后根据渲染树完成页面布局及绘制的过程（可以理解为“画”页面元素）。
这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。`
现在，我们应该已经了解了加载和渲染的概念，明白它们是两个不同的过程，那么对上文中抛出的疑问继续追问：
link先于@import加载，是不是也先于@import渲染呢？
实际上，渲染的动作一般都会执行多次，最后一次渲染，一定是依据之前加载过的所有样式整合后的渲染树进行绘制页面的，已经被渲染过的页面元素，也会被重新渲染。
那么我们就可以把@import这种导入 CSS 文件的方式理解成一种替换，CSS 解析引擎在对一个 CSS 文件进行解析时，如在文件顶部遇到@import，将被替换为该@import导入的 CSS 文件中的全部样式。
峰回路转，柳暗花明，终于弄明白为何@import引入的样式，会被层叠掉了。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠。
至此为止，“link引入的样式权重大于@import引入的样式”这个结论，我终于为它圆了场。但愿此结论的作者，本意真如我的猜测，否则若是我多心而跑偏了的话，不敢想象这背后究竟隐藏着多大的秘密。
祖坟
有些细心而专业的读者可能已经发现了，我用自己的思路和措辞，粗略的解释了有关 CSS 加载和渲染的知识，有些涉世未深的前端爱好者可能会一头雾水，无法作为系统学习的依据。这不打紧，出来混，祖坟总是要刨的，想要透彻的学习相关内容，进一步了解底层原理的学者，我早已为你备下了丰厚的见面礼~
有关link和@import在性能分析方面的比较，国外的高手早在多年前就曾执过笔：
爱好母语的请戳我：https://www.stevesouders.com/blog/2009/04/09/dont-use-import/
阅读英语的请戳我：https://www.qianduan.net/high-performance-web-site-do-not-use-import/
有关浏览器内部工作原理的神作，也是几年前出自歪果仁大牛：
1 为普通话：https://kb.cnblogs.com/page/129756/
2 for English：http://taligarsiel.com/Projects/howbrowserswork1.htm
对知识有所渴望的你，赶快点击上面的传送门，相信你一定会有丰富的收获。
感想
我喜欢读别人探究类的技术文章，不只是可以学习技术上的知识，更是可以学习别人探索的精神和思考问题的逻辑。或许已经有过不少前人如我一样，对本文的争议结论，有所质疑，前思后想过一番，得出了自己的见解，只是没有成文，或者没有发表而已。
那么其他人呢，就只是单纯的复制结论或记忆结论么。
其实我觉得，在咱们这个领域，不求甚解可以，人云亦云不行。一句含有信息量的句子，进入大脑时，总得自己考虑考虑吧，不要让我们的大脑充当转发器，最不济，也得是个解析器吧。
