CSS元素选择器是怎样运做的

时间 2020-11-11

标签 css html 前端 jquery git 程序员 github 面试 segmentfault 浏览器栏目 CSS 繁體版

原文原文链接

在前端工程师的平常工做中，使用 CSS 元素选择器是稀松日常的事；不管你是编写通常的 CSS 仍是须要通过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。可是你想过没有这是如何实现的呢？css

浏览器渲染

咱们先看一下浏览器的渲染步骤：html

CSS 在被浏览器加载后，会被解析成 CSSOM 树，并尝试与 Dom 叠加成渲染树，随后进行计算位置、渲染等步骤。这样看来，CSS 属性套用的关键就在于如何从 CSS 转化成 CSSOM 树，以及怎么把 CSSOM 套用到 DOM 上去。前端

CSSOM树

当咱们写下一组 CSS 样式时，例如：jquery

#id .class h4 + p {
   ...
}

浏览器在解析它时，你可能会认为 CSS 会按照由左到右的依序找出＃id>.class>h4>p，最后套用，但实际上浏览器解析 CSS 的顺序是由右到左的 p>h4>.class>＃id。git

很违背直觉对吧？但若是考虑到性能问题，从右到左的解析会比从左到右强不少。程序员

假设这有这样的 HTML：github

<div id="div1">
    <div class="a">
        <div class="b">
            ...
        </div>
        <div class="c">
            <div class="d">
                ...
            </div>
            <div class="e">
                ...
            </div>
        </div>
    </div>
    <div class="f">
        <div class="c">
            <div class="d">
                ...
            </div>
        </div>
    </div>
</div>

以及这边五条 CSS 样式规则：面试

#div1 .c .d {}
.f .c .d {}
.a .c .e {}
#div1 .f {}
.c .d {}

让咱们模拟一下，若是把 CSS 从左到右解析，将会生成相似这样的 CSSOM 树：segmentfault

经过 <div class =“ d”> 中的 .d 来思考，这样的 CSSOM 树在套用样式时，必须对全部的样式规则进行检查，以确认样式规则是否会影响到 .d，到最后才能肯定可能会影响到 .d 的样式规则有这三条：浏览器

＃div1 .c .d
.f .c .d
.c .d

以此类推，每一个 DOM 树上的元素，都必须便利全部的样式规则，才能够取得个别的样式，这样会形成大量冗余的计算，进而严重影响性能。

反过来，若是将前面的 CSS 由右到左进行解析，CSSOM 树则可能会以下：

和前面的例子同样，从 <div class =“ d”> 中 .d 的角度来看，因为会被样式规则影响到的目标元素，已经全都集中在第一层了，因此就不用再去便利整个 CSSOM 树了，甚至只须要检查 .d 如下的子属性变量是否符合实际 DOM 结构，再将全部符合的样式规则从新取回，便能完成 .d 对元素的样式规则套用。

从右到左的解析顺序可以将全部共享的规则路径收拢在一块儿，当浏览器进行属性比对时，就不用再便利整个 CSSOM 树，大大的减小了无效的比对计算。

也能够换个方式思考：在 HTML 的结构中，一个元素能够有无数个子元素，但只能有一个父元素，由子找父（由下往上）搜寻绝对是比较快的。

套用样式

将 CSSOM 树解析出来以后就可以和 DOM 结合了吗？若是真的有这么简单就太好了。

除了开发者定义好的 CSS 档外，还有几个地方可能会定义样式规则，影响画面的渲染：

HTML 的 inline style 设置
浏览器预设值（就是 CSS reset/normalize 要覆盖掉的东西）
浏览器的使用者偏好设定

浏览器负责处理 CSS 的部分，会吧前面全部的东西以及 CSS 文件定义的样式规则分别整理成单独的样式规则组（CSS 规则集），内容记载了样式规则、目标属性等信息。

目标属性

为了提高后面的计算效率，浏览器的 CSS 处理内核会按照样式规则组中个别规则的目标属性将其分组存放；一共分为如下四组

idRules
classRules
tagNameRules
universalRules

这样在取用时，能够依据目标元素是否存在这个属性，快速筛出可能会套用的样式。

套用规则

最后是套用规则。浏览器会遵循如下顺序和样式规则权重套用全部的样式规则：

浏览器的预设值
浏览器的使用者偏好设定
开发者定义的 CSS
inline style
加上 !important 的样式属性

你可能会好奇：为何 inline style 和开发者定义的 CSS 会被另外处理？

咱们能够回顾一下浏览器渲染的步骤，因为 inline style 存在于 DOM 元素中，只能在 CSS 套用到 DOM 上时才会接触到，事前没法将二者结合。

CSS 效率

实际上浏览器在这里已经完成了优化机制；浏览器会自动将状态一致的元素作样式快照。状态一致就是要知足如下几个条件：

没有设定 ID
tag 及 class 必须彻底一致
没有设定 style 属性
样式规则中不能使用各类同级选择器（例如： 〜，+，:first-child 等）

因为上面的条件，以及前面讨论到的 CSS 运算过程，编写 CSS 时也有几个地方能够稍微留心一下：

因为样式规则的目标属性会分组存放，id 选择器效率很是高，因此是不能与其余条件混用的。
不要写过深的 CSS 样式规则
能不用 inline style 就不要用，除了难以维护外，因为是存在于 DOM 树上，没法预先与其余样式合并计算，因此效率也会大打折扣

若是可以注意到这类典型的小细节，CSS 效率天然也能够大幅提高。

延伸

认识了 CSS 选择器以后，你必定会很好奇，JavaScript 的元素选择器又是怎么回事呢？这个问题能够参考 jQuery 的源码，它是由左到右的解析，至为何为何不同，其实在文中也有答案，就留给你思考挖掘吧。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...