CSS元素选择器的运作原理介绍-css教程-PHP中文网

首页

web前端

css教程

CSS元素选择器的运作原理介绍

青灯夜游

Nov 11, 2020 pm 05:56 PM

csshtmljavascript前端

CSS元素选择器的运作原理介绍

推荐教程：CSS视频教程

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

浏览器渲染

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

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

CSSOM树

当我们写下一组 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 的结构中，一个元素可以有无数个子元素，但只能有一个父元素，由子找父（由下往上）搜寻绝对是比较快的。