link和@import的区别

时间  2019-11-17
标签 link import 区别 繁體版
原文   原文链接

由link和@import的区别引起的CSS渲染杂谈

 

咱们都知道，外部引入 CSS 有2种方式，link标签和@import。
它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部份内容时，常常被提起。css

现在，不少学者本着知其然不欲知其因此然的学习态度，不求甚解，只求结论。
因此，本文遵循 css hack 的渐进识别原则，
结论 → 区别 → 争议 → 细节 → 祖坟 → 感想，逐渐加深理论层级，
力争每一个 level 的读者，都能 get 到本身想要的内容，没必要继续阅读下去。html

结论

就结论而言，强烈建议使用link标签，慎用@import方式。
这样能够避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。前端

区别

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的做用；link是HTML提供的标签，不只能够加载 CSS 文件，还能够定义 RSS、rel 链接属性等。web

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。浏览器

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签做为 HTML 元素，不存在兼容性问题。服务器

4.DOM可控性区别
能够经过 JS 操做 DOM ，插入link标签来改变样式；因为 DOM 方法是基于文档的，没法使用@import的方式插入样式。markdown

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。数据结构

争议

不知从何时开始，当你在网上搜索link和@import的区别时，千篇一概的答案里就悄悄的多了一句“link引入的样式权重大于@import引入的样式”。
可是并无一份答案，附带着对这句话的任何解释或实例。布局

这句话到底是什么意思，该怎么理解呢？post

发扬探索精神，咱们不妨继续查阅资料。后来发现，仍是有很多文章和帖子，对这句话表示质疑，进而本身写了 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=" 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

对知识有所渴望的你，赶快点击上面的传送门，相信你必定会有丰富的收获。

感想

我喜欢读别人探究类的技术文章，不仅是能够学习技术上的知识，更是能够学习别人探索的精神和思考问题的逻辑。或许已经有过很多前人如我同样，对本文的争议结论，有所质疑，前思后想过一番，得出了本身的看法，只是没有成文，或者没有发表而已。

那么其余人呢，就只是单纯的复制结论或记忆结论么。

其实我以为，在我们这个领域，不求甚解能够，人云亦云不行。一句含有信息量的句子，进入大脑时，总得本身考虑考虑吧，不要让咱们的大脑充当转发器，最不济，也得是个解析器吧。

相关文章