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

来源:http://www.chinese-glasses.com 作者:Web前端 人气:71 发布时间:2020-04-15
摘要:可以通过 JS 操作 DOM,插入link标签来改变样式;由于DOM方法是基于文档的,无法使用@import的方式插入样式。 区别 1.从属关系区别 @import 是 CSS提供的语法规则,只有导入样式表的作用;

可以通过 JS 操作 DOM ,插入link标签来改变样式;由于DOM方法是基于文档的,无法使用@import 的方式插入样式。

区别

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引入的样式。

加载:根据请求的url进行域名解析,然后向服务器发送请求,接收响应文件(如HTML、CSS、JS、图片等)。

细节

既然已经说了这么多,就顺便提一下关于@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引入的样式”这个结论,我终于为它圆了场。但愿此结论的作者,本意真如我的猜测,否则若是我多心而跑偏了的话,不敢想象这背后究竟隐藏着多大的秘密。

!important 行内样式 ID 类、伪类、属性 标签名 继承 通配符

感想

我喜欢读别人探究类的技术文章,不只是可以学习技术上的知识,更是可以学习别人探索的精神和思考问题的逻辑。或许已经有过不少前人如我一样,对本文的争议结论,有所质疑,前思后想过一番,得出了自己的见解,只是没有成文,或者没有发表而已。

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

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

css的优先级表现在,对同一个html元素设置元素的时候,不同选择器的优先级不同,优先级低的样式将会被优先极高的样式所覆盖。

 

 我们都知道,外部引入 CSS 有2种方式,link标签和@import

它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起。

如今,很多学者本着知其然不欲知其所以然的学习态度,不求甚解,只求结论。
所以,本文遵循 css hack 的渐进识别原则,
结论 → 区别 → 争议 → 细节 → 祖坟 → 感想,逐渐加深理论层级,
力争每个 level 的读者,都能 get 到自己想要的内容,不必继续阅读下去。

最近在做知识体系的复盘,在复盘的时候尽可能的查漏补缺。关于@import和link引入样式的区别网上有很多种说法。大致有如下几种,不过这其中会有我存疑的地方,我们可以一起来探讨一下。

祖坟

有些细心而专业的读者可能已经发现了,我用自己的思路和措辞,粗略的解释了有关 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 Englishhttp://taligarsiel.com/Projects/howbrowserswork1.htm

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

所以根据我们上述的浏览器执行过程的理解以后,我们我继续提出疑问:

争议

不知从什么时候开始,当你在网上搜索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 */
             padding: 0px;"> pink;
        }
        #divid .myspan input { /* 权重为 100 + 10 + 1 = 111 */
             padding: 0px;"> yellow;
        }
        input[type="button"] { /* 权重为 10 */
            color: white !important; /* !important权重为无穷大 */
        }
        input.myclass { /* 此为标签指定式选择器,权重为 1 + 10 = 11 */
            color: black;
        }
    </style>
</head>
<body>
    <div id="divid">

            <input type="button" id="myid" class="myclass" name="myname"
                value="点我" style=" color: green;">
                <!-- style样式的权重为1000 -->

    </div>
</body>
</html>

每个样式的权重值,都在实例中,以注释的形式标明。
根据权重值可知,最终,这个按钮的样式一定是,蓝色背景,白色字,结果如下图:
图片 1

存在!important时,不作他想,一定是权重最大的样式。

既然我们了解了,CSS 中的权重是怎么回事,那回到主题,“link引入的样式权重大于@import引入的样式”,
难道 CSS 的引入方式也有权重吗?其实我们不必纠结它是否有权重之说,我们只需理论结合实际的去分析,各种情况下,结果如何即可。
现有如下3个css文件:

/* green.css */
div {
     padding: 0px;">green;
    border: 3px solid red;
}

/* yellow.css */
div {
     padding: 0px;">yellow;
    border: 3px solid black;
}

/* blue.css */
@import url("green.css");
div{
     padding: 0px;">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

实例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结果如下图:
图片 3

对比实例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 {
             padding: 0px;"> pink;
        }
    </style>
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为粉色背景,红色边框,即green.css已生效,但背景色被内联样式层叠为粉色 -->
</body>
</html>

实例3结果如下图:
图片 4

实例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结果如下图:
图片 5

分析实例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 文件的方式理解成一种替换,CSS 解析引擎在对一个 CSS 文件进行解析时,如在文件顶部遇到@import,将被替换为该@import导入的 CSS 文件中的全部样式。

结论

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

同理,实例4中,在link标签引入的blue.css文件内,顶部同样存在@import引入的green.css,红色边框依然可以证明,green.css已经生效,但其背景样式被blue.css本身的蓝色背景层叠掉,@import引入的样式在blue.css中也是被置于它本身样式之前的。

加载页面时,link标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载。

分析实例3和实例4的结果可知:

首先我们来回顾一下关于浏览器执行过程的一些概念:

渲染:构建渲染树,对各个元素进行位置计算、样式计算等,然后根据渲染书完成页面的布局及绘制的过程(产生页面的元素)。

!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleDocument/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/headbody div  span  input type="button" name="myname" value="点我"  !-- style样式的权重为1000 -- /span /div/body/html
!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleDocument/title !-- 实例2. 内联样式引入green.css,link标签引入yellow.css -- style type="text/css" @import url("green.css"); /style link rel="stylesheet" href="yellow.css"/headbody div /div !-- 盒子为黄色背景,黑色边框,即yellow.css生效 --/body/html

再验证之前我们先来说说css权重的相关概念:

通配符0标签1类/伪类/属性10ID100行内样式1000important无穷大

2.加载顺序区别

link引入的样式权重大于@import引入的样式。(???)

解析:对加载到的资源(HTML、CSS、JS等)进行语法解析,构建响应的内部数据结构(如HTML的DOM树,JS对象的属性表,css样式规则等)。

eg2)

@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

疑点?

@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别

所以由上述实例证明link引入的样式权重大于@import引入的样式这么说是不太合理的。

css的权重优先级表现为:

eg4)

本文由10bet发布于Web前端,转载请注明出处:由link和@import的区别引发的CSS渲染杂谈

关键词:

最火资讯