zoukankan      html  css  js  c++  java
  • 71.浏览器是怎样解析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 则结束这个分支的遍历。


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

  • 相关阅读:
    连接池——tomcat自带连接池。
    jsp小记
    结合properties配置文件优化jdbc连接工具类
    StringBuffer
    多重继承关系初始化顺序及初始化
    Error
    算法:插入排序
    算法:冒泡排序
    算法:选择排序
    注册Activity
  • 原文地址:https://www.cnblogs.com/dream111/p/13461111.html
Copyright © 2011-2022 走看看