当浏览器解析html的时候,它构造了一个文档树来展现所有被显示的元素。 它在特定的样式表中去匹配元素,根据标准的css的层叠,继承和顺序规则, 在mozilla的实现中(可能其他的也是这样),对于每一个元素,css引擎通过规则去寻找匹配,css引擎评估每一个规则是从右到左的,从最右的selector开始, 也称之为key selector,直到找到匹配为止。

根据这个规则,越少的规则使用,css引擎将评估的越好。因此,移除没有用的css是改善页面性能的重要一步。之后,对于页面包含很多的元素的css规则,  优化这些规则也有利于提高页面的性能。优化页面性能最重要的一点在于使用明确的,避免不需要冗余的,使引擎系统快速的匹配到元素而不需要花费太多的时间。

下面的这些规则被认为是低效的

    1. 使用了后代选择器

使用全局选择器作为key

1 body * {...}
2 .hide-scrollbars * {...}

使用了标签选择器作为key

1 ul li a {...}
2 #footer h3 {...}
    1. 使用子选择器和相邻选择器

使用全局选择器作为key

1 body > * {...}
2 .hide-scrollbars > * {...}

使用标签选择器作为key

1 ul > li > a {...}
2 #footer > h3 {...}

子选择器和相邻选择器是低效的是因为对于每一个元素的匹配,浏览器不得不评估其他的一些元素,它需要双倍的时间耗费在匹配上。同时,越少的精确的key,越多的时间花费在匹配元素上面。尽管如此,即使是不高效的,他们比后代选择器的使用的效果要好一点。

    1. 过渡的限定选择器

id选择器是唯一的,包含了tag或者class的限定仅仅是增加了一些无用的信息(浏览器去评估)

1 ul#top_blue_nav {...}
2 form#UserLogin {...}
    1. 使用:hover在一些没有:hover的元素上面

在非标准模式下面。ie7,ie8将忽略这些规则。在标准模式下面,可能会导致一些性能的退化

1 h3:hover {...}
2 .foo:hover {...}

推荐的方式

    1. 避免使用全局样式

允许一个元素去继承它的祖先,或者使用一个class去应用复杂的元素。

    1. 将规则写的越精确越好

偏向使用class ,id,少使用tag

    1. 移除一些无用的限定

下面的这些限定是多余的:1.id选择器被class 或者tag选择器限定;2.class被tag选择器进行限定(如果一个class只被用于一个tag,这也是很好的实践)。

    1. 避免使用后代选择器,特别是包含了一些无用的祖先元素

eg:body ul li a{...} 制定了一个无用的body限定,因为所有的元素都是在body中。

    1. 使用class选择器取代后代选择器

eg:如果你需要两个不同的样式(一个无序列表,一个有序列表),不要使用下面的样式

1 ul li {color:blue}
2 ol li {color:red}

应该这样的使用

1 .unordered-list-item {color: blue;}
2 .ordered-list-item {color: red;}

如果你一定要用后代选择器,建议你使用子选择器

    1. 避免使用:hover在一些没有连接的元素上面(对于ie序列的)

如果你使用:hover在一些无连接的元素上面,ie7,8会认为他们是无用的。建议使用事件onmouseover 来模拟。

一些比较高效的CSS写法建议的更多相关文章

  1. 弄清楚CSS的匹配原理让你写出高效的CSS

    用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;} 按习惯我们对这个CSS 的理解是 ...

  2. 书写高效的CSS

    一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...

  3. [css] 【转载】 精简高效的CSS命名准则/方法

    原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...

  4. 书写更加高效的CSS,走出误区

    根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...

  5. css写作建议和性能优化小结

    1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...

  6. CSS书写建议参考

    总结一些CSS书写建议提供大给家参考,这些是参考了一些文章以及我的个人经验总结出来. 1.能缩写的就尽量缩写吧,毕竟谁都不想多些一些也可以提高阅读体验.包括类名.颜色和css属性.

  7. 如何书写高效的css样式

    如何书写高效的css样式? 有以下四个关键要素: 1.高效的css 2.可维护的css 3.组件化的css 4.hack-free  css 书写高效的css: 1.使用外联样式替代行间样式或内嵌样式 ...

  8. 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

  9. 编写高效的CSS选择器

    高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...

随机推荐

  1. FastDFS轻量级分布式文件系统部署

    FastDFS介绍 FastDFS 是一个由 C 语言实现的开源轻量级分布式文件系统,作者余庆,支持 Linux.FreeBSD.AID 等 Unix 系统,解决了大数据存储和读写负载均衡等问题,适合 ...

  2. 嵌入式linux系统移植(一)

    内容:   交叉编译环境   bootloader功能子系统   内核核心子系统   文件系统子系统要点:  搭建交叉编译环境  bootloader的选择和移植  kernel的配置.编译.移植和调 ...

  3. R语言学习笔记(十五):获取文件和目录信息

    file.info() 参数是表示文件名称的字符串向量,函数会给出每个文件的大小.创建时间.是否为目录等信息. > file.info("z.txt") size isdir ...

  4. PHP HashTable总结

    本篇文章主要是对 PHP HashTable 总结,下面的参考链接是很好的学习资料. 总结 HashTable 又叫做散列表,是一种用于以常数平均时间执行插入.删除和查找的技术.不能有效的支持元素之间 ...

  5. C#获取网络图片

    简单获取图片 string url = zhi_txt.Text;//图片地址 string dizhi = lujing.Text;//图片下载后保存路径及图片名称要写在一块 WebClient w ...

  6. Flexbox布局模式的理解

    个人博客地址:  雨中的鱼-前端知识分享   http://www.showhtml5.cc    分享干货,有兴趣的人可以一起来分享前端知识  加Q群:440279380   Flexbox,一种C ...

  7. MD5、SHA校验命令

    linux系统的软件很多时候都以境像的方式提供下载,但我们如何确实下载的文件是没有被篡改过的呢?Linux中一般用对下载的文件进行MD5和SHA校验来确认. MD5 我们拿iptraf软件来试验: 我 ...

  8. 使用fiddler对手机上的APP进行抓包

    前提: 1.必须确保安装fiddler的电脑和手机在同一个wifi环境下 备注:如果电脑用的是台式机,可以安装一个随身wifi,来确保台式机和手机在同一wifi环境下 安装配置步骤: 1.下载一个fi ...

  9. 机器学习sklearn的快速使用--周振洋

    ML神器:sklearn的快速使用 传统的机器学习任务从开始到建模的一般流程是:获取数据 -> 数据预处理 -> 训练建模 -> 模型评估 -> 预测,分类.本文我们将依据传统 ...

  10. python基础训练营03——字典、集合、判断、循环

    一.字典dict: 相比列表list而言,列表list像一本书,如果要查书中的某一个内容,需要把书从前往后翻一遍,直到找到想要获取的东西:而字典dict,就像现实中的字典一样,通过查找特定的字或者词( ...