• 根据浏览器渲染特性高效使用CSS选择器

    一些小技巧
    服务器君一共花费 16.125 ms 进行了 2 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    我们花了很多精力与篇幅去介绍浏览器的工作原理,那么可以应用在什么地方呢?你可以以此为参考设计一个浏览器,但是更多地,可以让你写出一些高效的CSS代码,让网页速度更快,因为这点还是比较容易做到的,写一个浏览器毕竟难度还是比较大。

    我们知道,资源被下载到客户端后,浏览器仍需加载,解释,并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面,就可以提升客户端的性能。

    这里先介绍如何高效地使用CSS选择器,避免低效率的匹配大量元素的键选择器【key selectors】可以加快页面渲染。

    当浏览器解析HTML时首先会构造一个内部文件树来代表所有显示的元素( 浏览器的DOM树构建算法)。然后浏览器根据标准的CSS级联、继承和排序规则,为元素指定匹配的各种样式。在Mozilla里的执行情况(可能在其他浏览器也是这样),CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则,从最右边的选择器开始(称为“键”【Key】),并通过移动每个选择器,直到找到一个匹配或丢弃的规则。(“选择器”是应用规则的文档元素。)

    基于此原则,引擎要评估的规则越少越好。所以提高渲染性能的重要一步就是删除未使用的CSS。在此之后,对包含大量的元素和CSS规则的页面来说,优化规则本身的定义就能够提高性能。优化规则的关键在于尽可能具体定义规则,并避免不必要的重复,让样式引擎快速找到匹配的规则,而不用花费时间查找不适用的规则。

    下列各类规则被认为是低效的:

    后代选择器的规则

    1. 通配选择器作为键的规则

    body * {...}
    .hide-scrollbars * {...}
    

    2. 标签选择器作为键的规则

    ul li a {...}
    #footer h3 {...}
    * html #atticPromo ul li a {...}
    

    后代选择器是低效的,因为对于每个与键相匹配的元素,浏览器必须遍历DOM树,评估每一个祖先元素,直到找到一个匹配或到达根元素。键越不具体,需要进行评估的节点数量就越大。

    子代选择器和相邻选择器的规则

    1. 通配选择器作为键的规则

    body > * {...}
    .hide-scrollbars > * {...}
    

    2. 标签选择器作为键的规则

    ul > li > a {...}
    #footer > h3 {...}
    

    子代选择器和相邻选择器是低效的,因为对每个匹配的元素,浏览器必须评估另一个节点。这样导致规则中的每个子选择器加倍消耗。同样,键越不具体,需要进行评估的节点数量就越大。尽管如此,虽然同样效率低下,在性能方面相对后代选择器而言,它们仍然是可取的。

    有多余修饰的规则

    例如:

    ul#top_blue_nav {...}
    form#UserLogin {...}
    

    ID选择是唯一的定义。加上标签或类的限制只增加了多余的、引起不必要评估的信息。

    对非链接元素应用:hover伪选择器的规则

    例如:

    h3:hover {...}
    .foo:hover {...}
    #foo:hover {...}
    div.faa:hover {...}
    

    非链接元素上的:hover伪选择器在某些情况下*会使IE 7 和IE 8 变慢。当页面没有一个严格的doctype时,IE 7 和IE 8 将忽略除了链接外的任何元素的:hover。当页面有严格的doctype,在非链接元素上的:hover将导致性能下降。

    建议

    • 避免通配选择器。允许元素继承祖先的样式,或者使用一个类来给多个元素应用样式。
    • 使您的规则尽可能具体。尽量使用class和ID选择器而非标签选择器。
    • 删除多余的修饰语。比如这些修饰语是多余的:ID选择器被class选择器和/或者标签选择器限制。class选择器被标签选择器限制(当一个类只是用于一个标签,无论如何这都是一个很好的设计实践)。
    • 避免使用后代选择器,特别是那些指定多余祖先的。例如,这一个规则 body ul li a {...} 指定了一个多余的body选择器, 因为所有的元素都是body标签的后代。
    • 使用class选择器代替后代选择器。例如,如果您需要有序列表项和无序列表项有不同的两个样式,而不是使用两个规则:
    • ul li {color: blue;}
      ol li {color: red;}
      

      你可以将样式编码成两个类名并在规则中使用,例如:

      .unordered-list-item {color: blue;}
      .ordered-list-item {color: red;}
      

      如果您必须使用后代选择器,尽量使用子代选择器,这最少只需评估一个额外的节点,而非中间直至祖先的所有节点。

    • 在IE中避免对非链接元素应用:hover。如果您对非链接元素应用:hover,请在IE7和IE8中测试并确保页面可用。如果您发现:hover导致性能问题,可以考虑条件性的为IE使用JavaScript onmouseover事件(只对IE写mouseover事件)。

    附加资源

    更多关于Mozilla里的高效CSS规则的细节,请看https://developer.mozilla.org/en/Writing_Efficient_CSS

更多 推荐条目

Welcome to NowaMagic Academy!

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

本章最新发布
随机专题
  1. [PHP程序设计] CodeIgniter与PHP框架设计 5 个条目
  2. [软件工程与项目管理] 了解一点WebKit 9 个条目
  3. [移动开发] Android根基概念Context 8 个条目
  4. [Python程序设计] Django Web环境配置 2 个条目
  5. [PHP程序设计] 命令式编程范式 6 个条目
  6. [Linux操作系统] CentOS上使用EPEL Repository 2 个条目
  7. [移动开发] Android Studio里的Gradle 3 个条目
  8. [PHP程序设计] 对输入文件类型的检测 1 个条目
  9. [Python程序设计] Django模板系统 11 个条目
  10. [Python程序设计] Django 入门知识浅介 10 个条目
  11. [搜索引擎优化] 与百度权重有关的信息 2 个条目
  12. [移动开发] Android抽屉导航NavigationDrawer 5 个条目
窗口 -- [资讯]