• 浏览器对CSS样式规则的匹配

    css文件的写法原理
    服务器君一共花费 14.478 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    我们在写 CSS 的时候,class 只需在 css 文件定义 .nowamagic{} 之类,id 则定义 #nowamagic{} 就可以了,那么在本小节里,会顺便介绍浏览器 CSS 匹配的规则。

    规则树是如何解决样式计算的难点? 提到了规则树解决了样式计算的两个难点,那么还有一个难点,即如果不进行优化,为每一个元素查找匹配的规则会造成性能问题,CSS 规则匹配可能比较棘手。

    为了解决这一难题,可以对 CSS 规则进行一些处理,以便访问。

    样式规则有一些来源:

    1. 外部样式表或样式元素中的 CSS 规则

    p {color:blue}
    

    2. inline 样式属性及类似内容

    <p style="color:blue" />
    

    3. HTML 可视化属性(映射到相关的样式规则)

    <p bgcolor="blue" />
    

    后两种很容易和元素进行匹配,因为元素拥有样式属性,而且 HTML 属性可以使用元素作为键值进行映射。

    样式表解析完毕后,系统会根据选择器将 CSS 规则添加到某个哈希表中。这些哈希表的选择器各不相同,包括 ID、类名称、标记名称等,还有一种通用哈希表,适合不属于上述类别的规则。如果选择器是 ID,规则就会添加到 ID 表中;如果选择器是类,规则就会添加到类表中,依此类推。

    这种处理可以大大简化规则匹配。我们无需查看每一条声明,只要从哈希表中提取元素的相关规则即可。这种优化方法可排除掉 95% 以上规则,因此在匹配过程中根本就不用考虑这些规则了。

    我们以如下的样式规则为例:

    p.error {color:red}
    #messageDiv {height:50px}
    div {margin:5px}
    

    第一条规则将插入类表,第二条将插入 ID 表,而第三条将插入标记表。

    对于下面的 HTML 代码段:

    <p class="error">an error occurred </p>
    <div id=" messageDiv">this is a message</div>
    

    我们首先会为 p 元素寻找匹配的规则。类表中有一个“error”键,在下面可以找到“p.error”的规则。div 元素在 ID 表(键为 ID)和标记表中有相关的规则。剩下的工作就是找出哪些根据键提取的规则是真正匹配的了。

    例如,如果 div 的对应规则如下:

    table div {margin:5px}
    

    这条规则仍然会从标记表中提取出来,因为键是最右边的选择器,但这条规则并不匹配我们的 div 元素,因为 div 没有 table 祖先。

    Webkit 和 Firefox 都进行了这一处理。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [JavaScript程序设计] jQuery与表单操作 2 个条目
  2. [移动开发] ListView 使用相关问题集 1 个条目
  3. [软件工程与项目管理] 呈现树的构建 13 个条目
  4. [PHP程序设计] 声明式编程范式 12 个条目
  5. [PHP程序设计] fsockopen,curl与file_get_contents 12 个条目
  6. [PHP程序设计] PHP数组的遍历 7 个条目
  7. [PHP程序设计] PHP数组探索 4 个条目
  8. [智力开发与知识管理] 整体性学习策略 9 个条目
  9. [PHP程序设计] PHP里的引用 5 个条目
  10. [Python程序设计] 标准库:urllib/urllib2 14 个条目
  11. [运维管理] 路由器与交换机 4 个条目
  12. [PHP程序设计] PHP中的Hash算法 3 个条目
窗口 -- [博客]