• 浏览器如何解析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 则结束这个分支的遍历。


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

    好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。
  • 相关阅读:
    数据库设计中的四个范式(转)
    几个SQL
    一个整形数组,找其中第二大值
    装箱与拆箱
    继承与隐藏方法
    C++/C# 最基本的Marshal和Ptr
    C++/C#结构体转化-传string给C++
    C++/C#结构体转化-二维数组-bytes To Strings
    C# 懒人常用异步方法
    jsplumb 的初次使用
  • 原文地址:https://www.cnblogs.com/wangxi01/p/11590077.html
Copyright © 2020-2023  润新知