Skip to main content

CSS 为什么要从右往左解析

本篇文章代码来源于 https://juejin.im/post/6876949988258086926 本文只写心得

这个很通俗的讲，浏览器从左往右解析会更累

<style>
    .demo p span{
        color:#09f;
    }
</style>

<div class="demo">
    <ul>
        <li>
            <a href="javascript:;">这是a</a>
        </li>
    </ul>
    <p>
        <span>这个才是span</span>
    </p>
</div>

假设 css 是从左往右解析

那么 浏览器需要从 .span 开始寻找，从上述代码中可以看到 .span 的第一层子节点有 ul 和 p ，那么就要遍历所有的第一层子节点，但是 ul 节点下还有数据，浏览器就需要遍历 ul节点下的 li ，再从 li 遍历 li 的节点 ; 浏览器从 p 节点下的 span 找到了目标，然后给 span 渲染样式，结束这个遍历，那么 ul 节点下的遍历就是完全的无用功，会造成性能上的浪费

而 css 如果是从右往左遍历的话

先找到所有的 span 节点，对于每一个 span 节点都向上寻找节点 p 再由 p 节点向上寻找 demo 节点，最后再找到 html 根源素结束遍历，这样就不会出现 div -> ul -> li -> a这条路径的无用遍历

那么根据这个原则,在打代码的时候需要注意几点

  1. CSS 可以抽取样式出来就尽量的使用继承，或者抽取公共的属性出来做公共的样式，尽量的减少 css 代码，使得遍历的查找的分支尽量少

  2. CSS 路径尽量少写尽量不要超过四层，比如上述代码的.demo p span 可以简写成.demo span