关于浏览器css选择器性能优化

  作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式、避开开销大的方式这些无疑为网站加载缩短了时间。
  最近在新的项目中陷入了一个误区,也是出于对jquery使用的了解,于是把jquery中选择器的优化放到了写css上面,但是发现其实这两者是不一样的,浏览器解析css是本身默认的规则,而jquery是模拟出来的规则为了用户更好的使用。后面去查找这方面的资料,于是发现自己的错误是那么的可笑。
找到了阿里前端的一篇文章http://www.aliued.cn/2013/01/24/网站css选择器性能讨论.html ,当然也找了其他的一些文章,不过都有说到了safari和webkit的架构师David Hyatt的两段话:

  样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。
  如果你非常在意页面的性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant and child selectors)对页面性能的改善更值得关注。


  因为我项目的原因,css3还是没有支持的,所以用不上css3的选择器。
  网上的资料也说到了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://blog.archive.jpsykes.com/151/testing-css-performance/
  http://blog.archive.jpsykes.com/152/testing-css-performance-pt-2/
  http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/
  Testing CSS Performance Jon Sykes
  https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS
?  

  来自:http://www.subying.com/archives/52.html subying blog

[转]关于浏览器css选择器性能优化,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。