[转]关于浏览器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