推荐教程:CSS视频教程
在前端工程师的日常工作中,使用 CSS 元素选择器是稀松平常的事;无论你是编写一般的 CSS 还是需要经过编译的 SASS,SCSS,LESS等,最终都被编译成一行一行的 CSS 样式属性,最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?
我们先看一下浏览器的渲染步骤:
CSS 在被浏览器加载后,会被解析成 CSSOM 树,并尝试与 Dom 叠加成渲染树,随后进行计算位置、渲染等步骤。这样看来,CSS 属性套用的关键就在于如何从 CSS 转化成 CSSOM 树,以及怎么把 CSSOM 套用到 DOM 上去。
当我们写下一组 CSS 样式时,例如:
#id .class h4 + p { ... }
浏览器在解析它时,你可能会认为 CSS 会按照由左到右的依序找出#id
>.class
>h4
>p
,最后套用,但实际上浏览器解析 CSS 的顺序是由右到左的 p
>h4
>.class
>#id
。
很违背直觉对吧?但如果考虑到性能问题,从右到左的解析会比从左到右强很多。
假设这有这样的 HTML:
<p id="p1"> <p class="a"> <p class="b"> ... </p> <p class="c"> <p class="d"> ... </p> <p class="e"> ... </p> </p> </p> <p class="f"> <p class="c"> <p class="d"> ... </p> </p> </p> </p>
以及这边五条 CSS 样式规则:
#p1 .c .d {} .f .c .d {} .a .c .e {} #p1 .f {} .c .d {}
让我们模拟一下,如果把 CSS 从左到右解析,将会生成类似这样的 CSSOM 树:
通过 <p class =“ d”>
中的 .d
来思考,这样的 CSSOM 树在套用样式时,必须对所有的样式规则进行检查,以确认样式规则是否会影响到 .d
,到最后才能确定可能会影响到 .d
的样式规则有这三条:
#p1 .c .d
.f .c .d
.c .d
以此类推,每个 DOM 树上的元素,都必须便利所有的样式规则,才可以取得个别的样式,这样会造成大量冗余的计算,进而严重影响性能。
反过来,如果将前面的 CSS 由右到左进行解析,CSSOM 树则可能会如下:
和前面的例子一样,从 <p class =“ d”>
中 .d
的角度来看,由于会被样式规则影响到的目标元素,已经全都集中在第一层了,所以就不用再去便利整个 CSSOM 树了,甚至只需要检查 .d
以下的子属性变量是否符合实际 DOM 结构,再将所有符合的样式规则重新取回,便能完成 .d
对元素的样式规则套用。
从右到左的解析顺序能够将所有共享的规则路径收拢在一起,当浏览器进行属性比对时,就不用再便利整个 CSSOM 树,大大的减少了无效的比对计算。
也可以换个方式思考:在 HTML 的结构中,一个元素可以有无数个子元素,但只能有一个父元素,由子找父(由下往上)搜寻绝对是比较快的。
将 CSSOM 树解析出来之后就能够和 DOM 结合了吗?如果真的有这么简单就太好了。
除了开发者定义好的 CSS 档外,还有几个地方可能会定义样式规则,影响画面的渲染:
浏览器负责处理 CSS 的部分,会吧前面所有的东西以及 CSS 文件定义的样式规则分别整理成单独的样式规则组(CSS 规则集),内容记载了样式规则、目标属性等信息。
为了提升后面的计算效率,浏览器的 CSS 处理内核会按照样式规则组中个别规则的目标属性将其分组存放;一共分为以下四组
这样在取用时,可以依据目标元素是否存在这个属性,快速筛出可能会套用的样式。
最后是套用规则。浏览器会遵循以下顺序和样式规则权重套用所有的样式规则:
你可能会好奇:为什么 inline style 和开发者定义的 CSS 会被另外处理?
我们可以回顾一下浏览器渲染的步骤,由于 inline style 存在于 DOM 元素中,只能在 CSS 套用到 DOM 上时才会接触到,事前无法将两者结合。
实际上浏览器在这里已经完成了优化机制;浏览器会自动将状态一致的元素做样式快照。状态一致就是要满足以下几个条件:
〜
,+
,:first-child
等)由于上面的条件,以及前面讨论到的 CSS 运算过程,编写 CSS 时也有几个地方可以稍微留心一下:
如果能够注意到这类典型的小细节,CSS 效率自然也可以大幅提升。
认识了 CSS 选择器之后,你一定会很好奇,JavaScript 的元素选择器又是怎么回事呢?这个问题可以参考 jQuery 的源码,它是由左到右的解析,至为什么为什么不一样,其实在文中也有答案,就留给你思考挖掘吧。
更多编程相关知识,请访问:编程入门!!
以上就是CSS元素选择器的运作原理介绍的详细内容,更多请关注php中文网其它相关文章!
已抢186544个
抢已抢67287个
抢已抢352980个
抢已抢667161个
抢已抢122330个
抢已抢23451个
抢