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选择器具有高效的继承性,引用Steve Souders的话, CSS选择器效率从高到低的排序如下:ID选择器 比如#header类选择器 比如.promo元素选择器 比如 di...
  • xuexiaodong2009
  • xuexiaodong2009
  • 2016年08月03日 09:43
  • 2146

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

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

CSS选择器-优先级-性能

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

css选择器以及性能开销

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。 如果你非常在意页面的性能那千万别使用CS...
  • zerofine
  • zerofine
  • 2016年05月30日 16:39
  • 312

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

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

css之提高渲染性能的写法

css之提高渲染性能的写法 最近今天在看web标准,看到了一条css样式表要用外联的形式,这样可以提高渲染速度。对于渲染速度,(css3渲染速度快,页面显示的快)上网看了很多帖子与论坛,总结了一...
  • foreverLove_lyf
  • foreverLove_lyf
  • 2016年04月12日 18:26
  • 1213

CSS选择器种类及及其使用介绍

常用的有标签选择器、类选择器、ID选择器等等,其实还有很多,在接下来的文章中为大家详细介绍下这些选择器的种类及其使用 首先说主要都有哪些先择器  1.标签选择器(如:bod...
  • zhuhai__yizhi
  • zhuhai__yizhi
  • 2015年05月14日 14:32
  • 380

CSS选择器效率问题

有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能。这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候。 下面的规则只真正被应用到那些速度...
  • Inuyasha1121
  • Inuyasha1121
  • 2016年10月19日 13:59
  • 159

CSS选择器总结

最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器。一些不常见的选择器包括类选择器(:hover),很多复杂的CSS3和正则选择器,比如:first-child,c...
  • iOSbird
  • iOSbird
  • 2017年05月17日 14:15
  • 273

CSS常用选择器及优先级

基础选择器 1. 通用选择器,匹配任何元素:*     *{         color:#FF0000;     } 2.标签选择器,匹配指定的所有标签:     p{        ...
  • JiangPF1992
  • JiangPF1992
  • 2015年10月26日 21:34
  • 1377
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css选择器以及性能开销
举报原因:
原因补充:

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