css选择器以及性能开销

转载 2016年05月30日 16:39:07

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

如果你非常在意页面的性能那千万别使用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

相关文章推荐

CSS选择器性能

CSS选择器损耗到底来自哪里呢?CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。而在这之前我们需要了解CSS选择器匹...

如何提升CSS选择器的性能?

CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: ...

CSS选择器-优先级-性能

从开始用css选择器到现在这么久了,自以为对它的理解已经差不多了,够用了,知道之前面试一家公司后,瞬间把我问懵逼了,今把最近研究的css选择器和大家分享哈,虽然文字稍微有点多,能耐心看完我相信你多少还...

css选择器与JQ选择器的性能比对与优化方案

css和JQ的选择器写起来似乎很相似,但他们的写法在性能上有一定的区别。以下就较为常用的选择器进行比对和优化:CSS选择器效率高到低:1.id选择器(#id)2.类选择器(.class)3.标签选择器...

CSS基础-派生选择器

  • 2015年11月22日 23:35
  • 90KB
  • 下载

CSS选择器中的正则表达式

放张头图来放松放松哈哈哈哈哈哈哈哈哈哈哈哈~一 是的,CSS也有正则(阿门)CSS装逼两利器:矩阵和正则。其实呢,我们也不必惊讶,CSS毕竟也是一门语言,而且正则本来就是有利于某个具体语言之外的东西。...

Css选择器_案例】仿当当网首页

  • 2013年12月18日 09:19
  • 1.41MB
  • 下载

CSS选择器笔记

  • 2012年10月10日 13:42
  • 85KB
  • 下载

jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)备忘

转自:http://hi.baidu.com/vguishjxghimpxs/item/e893c42510a1c5102a0f1c54 在選擇器里面幾種符號 1,(逗號) 2 (空格) 3.(英文...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css选择器以及性能开销
举报原因:
原因补充:

(最多只允许输入30个字)