zoukankan      html  css  js  c++  java
  • 浏览器如何解析css选择器?

    浏览器会『从右往左』解析CSS选择器。
    我们知道DOM Tree与Style Rules合成为 Render Tree,实际上是需要将Style Rules附着到DOM Tree上,
    因此需要根据选择器提供的信息对DOM Tree进行遍历,才能将样式附着到对应的DOM元素上。
    以下这段css为例
    <style type="text/css">
    .mod-nav h3 span {font-size: 16px;}
    </style>
    若从左向右的匹配,过程是:

    从 .mod-nav 开始,遍历子节点 header 和子节点 div
    然后各自向子节点遍历。在右侧 div 的分支中
    最后遍历到叶子节点 a ,发现不符合规则,需要回溯到 ul 节点,再遍历下一个 li-a,一颗DOM树的节点动不动上千,这种效率很低。

    如果从右至左的匹配:

    先找到所有的最右节点 span,对于每一个 span,向上寻找节点 h3
    由 h3再向上寻找 class="mod-nav" 的节点
    最后找到根元素 html 则结束这个分支的遍历。


    后者匹配性能更好,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。

    好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。
  • 相关阅读:
    react系列教程
    实现 React Hooks
    实现 call、apply、bind
    Webpack概念
    写一个简单的模板引擎
    闭包和let块级作用域
    react系列(六)Redux Saga
    react系列(五)在React中使用Redux
    java学习12天2020/7/17
    java学习第十一天2020/7/16
  • 原文地址:https://www.cnblogs.com/wangxi01/p/11590077.html
Copyright © 2011-2022 走看看