- 浏览: 18382 次
- 性别:
- 来自: 北京
最新评论
1.#nav li {}
看起来很快,实际上很慢,尽管这让人有点费解#_#。我们中的大多数人,尤其是那些从左到右阅读的人,可能猜想浏览器也是执行从左到右匹配规则的,因此会推测这条规则的开销并不高。在脑海中,我们想象浏览器会像这样工作:找到唯一的ID为nav的元素,然后把这个样式应用到直系子元素的li元素上。我们知道有一个ID为nav的元素,并且它只有几个Li子元素,所以这个CSS选择符应该相当高效。
事实上,CSS选择符是从右到左进行匹配的。了解这方面的知识后,我们知道这个之前看似高效地规则实际开销相当高,浏览器必须遍历页面上每个li元素并确定其父元素的id是否为nav。
2.*{}
这种效率是差到极点的做法,因为*通配符将匹配所有元素,所以浏览器必须去遍历每一个元素,这样的计算次数可能是上万次!
3.ul#nav{} ul.nav{}
在页面中一个指定的ID只能对应一个元素,所以没有必要添加额外的限定符,而且这会使它更低效。同时也不要用具体的标签限定类选择符,而是要根据实际的情况对类名进行扩展。例如把ul.nav改成.main_nav更好。
4.ul li li li .nav_item{}
对于这样的选择器,最后自己也数不过来有多少后代选择器了,何不用一个类来关联最后的标签元素,如.extra_navitem,这样只需要匹配class为extra_navitem的元素,效率明显提升了。
对此,在CSS书写过程中,总结出如下性能提升的方案:
1.避免使用通配规则 如 *{} 计算次数惊人!只对需要用到的元素进行选择
2.尽量少的去对标签进行选择,而是用class 如:#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}
3.不要去用标签限定ID或者类选择符 如:ul#nav,应该简化为#nav
4.尽量少的去使用后代选择器,降低选择器的权重值 后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
5.考虑继承 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则
但说到底,CSS性能这东西对于小的项目来讲可能真的是微乎其微的东西,提升可能也不是很明显,但对于大型的项目肯定是有帮助的。而且一个好的CSS书写习惯和方式能够帮助我们更加严谨的要求自己。
发表评论
-
css兼容问题
2018-02-26 13:14 3851. 就是 ie6 双倍边距的问题,在使用了 float 的情 ... -
web标准
2018-02-22 14:25 384web标准简单来说可以分为结构、表现和行为。其中结构主要是有H ... -
总结一些每次写都要百度的样式 and so on
2016-06-03 14:00 461本次总结无关乎顺序, ... -
js检测css样式的兼容问题
2015-07-24 20:30 835<script> ... -
canvas画布基础
2015-07-10 20:47 421canvas是个神奇的标签,开始学习之后就停不下来,这两天一直 ... -
PHP正则表达式
2015-07-07 14:34 434正则表达式的基本语法 ... -
PHP字符串与数组常用函数
2015-07-07 10:42 1961字符串: 字符串的连接:PHP中用英文的点号.来连接两个字符串 ... -
DOM事件对象event、IE中的事件对象
2015-07-02 16:45 489DOM中的事件对象: type属性用于获取事件类型; targ ... -
跨浏览器事件处理程序
2015-07-02 16:03 470<div id = "box"& ... -
jQuery获取父级元素、同级元素、子元素、过滤
2015-07-01 15:50 484父级元素: <body>body (曾曾祖父) ... -
点击按钮实现轮播切换
2015-06-29 19:13 988HTML: <div class="con3 ... -
jQuery验证邮箱手机
2015-06-29 19:03 503验证邮箱: function checkSignEmail ... -
ios多线程
2014-11-27 14:35 450最近写了一个东西需要加载网络上的图片,运行的时候一直卡到一个界 ... -
取出数组中的值
2014-11-01 21:08 306在写程序的时候,遇到一个问题,想把数组[a,b]中的a,b添加 ... -
解析json获取数据
2014-11-01 20:57 387NSError *error; NSURLReq ... -
cell重用问题
2014-11-01 20:44 559解决问题之前,在cell上添加了label,但是给label添 ... -
保存并获取数据
2014-09-27 19:38 298在IOS开发过程中,经常会遇到数据保存的问题,现在主要说一下用 ... -
UINavigationController实现页面跳转
2014-09-19 20:31 774总结一下利用navigationController push ... -
tableviewcell添加label、button
2014-09-13 22:02 15901.给tableviewcell添加label,首先 CG ... -
简单表视图并实现添加数据
2014-09-10 19:21 13161.基础:表用于显示数据列表。数据列表中的每项都由行表示。表视 ...
相关推荐
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理。放弃到处可见的基础知识、网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者使用CSS布局的思维方式,通过本书的阅读读者将会...
9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生网页作业,div css js 等通过dreamwear的工具实现规范化,比如文件夹的规范,代码写作的规范,...
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
svg转css,css转svg,svg与css互相转换并压缩
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
由于本书压缩质量比较好,所以格式比较大,40MB多,我分了6段压缩大家可以按 精通CSS(css mastery)中文版 part1 精通CSS(css mastery)中文版 part2 精通CSS(css mastery)中文版 part3 精通CSS(css ...
什么是CSS? CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。 CSS 是用来表现HTML或XML的标记语言。 CSS 是由W3C的CSS...
CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装
CSS3实现烟花特效-图片+css
CSS
包含:CSS权威指南、css彻底设计研究、HTML5和CSS3实战、HTML5与CSS3设计模式