Skip to content

Latest commit

 

History

History
23 lines (14 loc) · 1.43 KB

浏览器如何解析 CSS 选择器?.md

File metadata and controls

23 lines (14 loc) · 1.43 KB

浏览器如何解析 CSS 选择器?

浏览器从右往左(也称为自底向上)解析 CSS 选择器,这样的匹配节点的方式可以快速、准确的与 render 树上的节点进行匹配,避免了许多无效匹配。浏览器需要评估的规则越少,样式引擎执行的速度就越快。

例如:

.menu ul li a {
  color: plum;
}

浏览器会先检查 aliul,然后是 .menu

这是因为当浏览器扫描页面时,它只需要查看当前的节点和之前扫描过的所有节点。

需要注意的是,浏览器在获得完整的节点时就开始处理,无需等待整个页面,除非它找到一个脚本,在这种情况下,它会暂时暂停并完成脚本的执行,然后继续执行。

如果是相反的方式,则效率会很低,因为浏览器在第一次检查时找到了它正在扫描的元素,但随后被迫继续在文档中查找所有其他选择器。为此,浏览器需要有整个 html,并可能需要扫描整个网页之前,它才开始 css 绘制。

这与大多数 lib 解析 DOM 的方式相反。DOM 就是在这里构建的,它不需要扫描整个页面,只需找到第一个元素,然后继续匹配其中的其他元素。

详细内容你可以在 Why do browsers match CSS selectors from right to left? 查看,进行讨论。