关闭

css选择器以及性能开销

标签: css选择器性能开销
195人阅读 评论(0) 收藏 举报
分类:

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。

如果你非常在意页面的性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant and child selectors)对页面性能的改善更值得关注。

 网上的资料也说到了Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序:

    1.id选择器(#myid)
    2.类选择器(.myclassname)
    3.标签选择器(div,h1,p)
    4.相邻选择器(h1+p)
    5.子选择器(ul < li)
    6.后代选择器(li a)
    7.通配符选择器(*)
    8.属性选择器(a[rel="external"])
    9.伪类选择器(a:hover,li:nth-child)
    
    我觉得这些应该是这方面比较权威的资料了,那么就分析一下使用过程该注意的问题,特别是跟我一样都是jquery的热爱者,真的是要特别注意一下,下面说一下我理解的一些例子(结合jquery分析):
    1.id选择器肯定是最快,但是不要在ID选择器使用的同时再使用标签或类选择器了,这点上jquery也是一样的。
    不要出现这样的写法 "div#content" 或者 "#content.text"。David Hyatt的第一段话中有说到了,样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。,而在html中ID是唯一的,如果真的是用了 "div#content",浏览器通过ID定位到了具体的元素,然后发现左侧还是标签选择器,那么就会继续匹配,继续查找元素,这样无疑损耗了浏览器的性能,影响了渲染时间。

    2.不要在类选择器时用标签选择器,这点跟jquery是刚好相反的。
    不要出现这样的写法 "div.text",从css的效率来看,类选择器(class)是比标签选择器要好,这样的写法只会增加了查找的难度,如果真的是根据标签来区分样式的话,考虑写不同的class。

    3.如果明确dom结构,先使用子选择器,减少后代选择器使用,这点跟jquery的对比没有留意和实践,本人认为是相反的。
    如果你的写法是这样 "div a",而实际上div 跟 a 是父子关系,如果合适更建议是这么用 "div>a",这样效率高一些,但是不是最好的方案,下面这一点的方案会更好一些。
    
    4. 使用类选择器替代后代选择器和子选择器,这点上跟jquery是不一样的。
    如果你的写法是这样 "div a" "div>a",虽然前面建议用子选择器替换后代选择器,但是这两个的方式还是效率低,David Hyatt的第3段话:后代选择器在CSS中是最昂贵的选择器。贵得要命——尤其是把它和标签或通配符放在一起! 毫无疑问,我们要想其他的方式来替换这种书写方式,那么可以考虑这样的写法:div对应的为".div-text" a对应的为".div-text-a",从命名上来关联两者,在查看的时候逻辑也会清晰很多。

    5. 尽量使用继承来避免写重复的样式,这点与jquery没有关系了。
    你可能会这样写 "#text{}  #text>.span:{font-size:24px;}  #text>.a{font-size:24px;}" ,那么可以这么写".text{font-size:24px;}",让下面的继承这个样式。

    这些我对css选择器的一些看法,上面没有说到的就是通配符选择器(*)和属性选择器,这个其实才是最消耗性能的,因为是针对所有的元素,即便是配合其他的选择器来用也很耗性能。实际上的ID选择器使用的机会不是很高,因为Html中的ID是唯一的,不会有很多的ID。那么从上面的分析,可以得到这么一个规则:尽量使用类选择器(class),避免使用通配符选择器(*)和属性选择器,后代选择器和子选择器也尽量避免。

原文来自于:http://my.oschina.net/tearlight/blog/221730
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30780次
    • 积分:882
    • 等级:
    • 排名:千里之外
    • 原创:59篇
    • 转载:6篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论