浏览器从右往左(也称为自底向上)解析 CSS 选择器,这样的匹配节点的方式可以快速、准确的与 render 树上的节点进行匹配,避免了许多无效匹配。浏览器需要评估的规则越少,样式引擎执行的速度就越快。
例如:
.menu ul li a {
color: plum;
}
浏览器会先检查 a
、li
、ul
,然后是 .menu
。
这是因为当浏览器扫描页面时,它只需要查看当前的节点和之前扫描过的所有节点。
需要注意的是,浏览器在获得完整的节点时就开始处理,无需等待整个页面,除非它找到一个脚本,在这种情况下,它会暂时暂停并完成脚本的执行,然后继续执行。
如果是相反的方式,则效率会很低,因为浏览器在第一次检查时找到了它正在扫描的元素,但随后被迫继续在文档中查找所有其他选择器。为此,浏览器需要有整个 html,并可能需要扫描整个网页之前,它才开始 css 绘制。
这与大多数 lib 解析 DOM 的方式相反。DOM 就是在这里构建的,它不需要扫描整个页面,只需找到第一个元素,然后继续匹配其中的其他元素。
详细内容你可以在 Why do browsers match CSS selectors from right to left? 查看,进行讨论。