作为一个前端开发, 我觉得很有必要了解浏览器对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选择器性能优化的更多相关文章

  1. 如何提升 CSS 选择器性能

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

  2. 提升 CSS 选择器性能的方法

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

  3. CSS选择器 - 性能的探究及提升

    [本博客为原创:http://www.cnblogs.com/HeavenBin/]  前言: 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况,利用工作之余研究从其命名再到 ...

  4. css,html性能优化

    css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中 ...

  5. CSS选择器的优化

    前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...

  6. 网站CSS选择器性能讨论

    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...

  7. CSS选择器性能分析

    写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...

  8. 目前最全的浏览器/CSS选择器兼容性总结(2009-8-10更新)

    2009年2月24日,Safari 4.0 beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3).不过为了方便大家的工作,下面提供了最新版本的CSS选 ...

  9. CSS前端性能优化

    1.Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序: 1. id选择器(#myid) 2. 类选择器(.myclassname) 3. 标签选择器 ...

随机推荐

  1. 不再需要ImageOle或DynamicGifCtl,.NET实现IM编辑控件

    多年前写过一篇文章<C# 实现IM聊天信息输入显示控件(1)-显示GIF动画图片>,主要是使用ActiveX控件实现RichTextBox插入gif动画图片,包括使用QQ的ImageOle ...

  2. day 44 django 学习入门

    前情提要: 终于学到了Django  ...古川小姐姐好流b .....7天学完.....脑壳疼..为了出了这个小火箭.. 详细参考官网. https://www.django.cn/ 中文网站 一: ...

  3. ajax实现快递单号查询

    效果:(代码写的有点乱,自行修改就可以了) 源码: index.php <!DOCTYPE html> <html lang="en"> <head& ...

  4. csc命令

    CSC.exe把Visual C#程序代码编译成IL文件时,有着很多参数和开关选项.正确的了解和运用这些参数和开关有时会解 决一些看似很棘手的问题.下面就通过一张表来大致说明一下这些参数和开关的具体作 ...

  5. Python3之hashlib

    简介: 用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法. 在python3中已经废弃了md5和sha模块,简单说 ...

  6. 剑指offer六十之按之把二叉树打印成多行

    一.题目 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行.二.思路 队列LinkedList完成层序遍历,用end记录每层结点数目 三.代码 import java.util.Arra ...

  7. 部署nexus服务

    一.安装和启动 官网下载nexus-2.12安装包,地址:https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.12.0- ...

  8. .Net WEB 程序员需要掌握的技能

    原文链接:http://deshui.wang/%E6%8A%80%E6%9C%AF/2015/05/12/net-study-road 基础部分 C# 基础语法 OOP的概念,面向对象的理解 继承 ...

  9. 使用Topshelf部署Windows服务

    新建一个控制台应用程序,使用Nuget安装TopShelf: nuget Install-Package Topshelf 测试代码: 在Main中输入: //FileInfo fi = new Fi ...

  10. 【树】Convert Sorted Array to Binary Search Tree

    题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...