html5中文学习网

您的位置: 首页?>?CSS3技术 ? 正文

CSS通用元素选择器的都市流言

[ ] 已经帮助:人解决问题

?本文尚未有测试数据支持,以下结论仅是根据现有情况的一种解释。GAmHTML5中文学习网 - HTML5先行者学习网

关于 * 这个选择器,一直有个疑惑,到底是否影响效率。在先前的观念中,这由于要匹配所有的元素,让每一个元素都带上这个属性,所以会影响页面的效率。但近来的思考,觉得这应该不会影响效率。为此还特地写过一篇博文,里边提到了这点:真的还需要reset.css么?GAmHTML5中文学习网 - HTML5先行者学习网

而这篇文章中我打算着重阐述为何 * 这个选择器不会影响效率。GAmHTML5中文学习网 - HTML5先行者学习网

上周六去参加了?web标准化交流会,席间 winter 从浏览器(webkit)的角度分享了关于页面渲染的过程。其PPT也可以在前面的链接中下载到。GAmHTML5中文学习网 - HTML5先行者学习网

其中一个很重要的过程是,当页面载入过程中,CSS 和 HTML 是并行下载的。并且通常CSS是在HEAD中引入的,并且体积不如HTML大,所以CSS会先下载完。下载的过程中浏览器就已经开始对CSS中的规则进行索引,也就是已经确定哪一个元素呈现的样式是如何的了。同时,浏览器根据HTML构建出的DOM树,其中的每一个元素会直接去CSS规则索引中去比对,构建出渲染树。这个过程都是并行的,并且CSS规则是进行了索引的,因此速度非常的快速。GAmHTML5中文学习网 - HTML5先行者学习网

那么我们看看CSS规则的来源主要有2个,一是浏览器内置的元素样式,Firefox 3.x版是放在目录下的res文件夹内,4.0版和Chrome中没找到(这里是我的主观臆断不太可靠,大家自行辨别),另一个就是页面提供的。根据查看 放在 res 文件夹下的 CSS 文件就可以得知,就是是什么样式都不写,已经为每一个HTML元素设定好了基本样式了。GAmHTML5中文学习网 - HTML5先行者学习网

那么看看我们所忌讳的事情,不用*{margin:0;padding:0},而是使用GAmHTML5中文学习网 - HTML5先行者学习网

  1. html,?body,?div,?span,?applet,?object,?iframe,?
  2. h1,?h2,?h3,?h4,?h5,?h6,?p,?blockquote,?pre,?
  3. a,?abbr,?acronym,?address,?big,?cite,?code,?
  4. del,?dfn,?em,?font,?img,?ins,?kbd,?q,?s,?samp,?
  5. small,?strike,?strong,?sub,?sup,?tt,?var,?
  6. b,?u,?i,?center,?
  7. dl,?dt,?dd,?ol,?ul,?li,?
  8. fieldset,?form,?label,?legend,?
  9. table,?caption,?tbody,?tfoot,?thead,?tr,?th,?td?{?
  10. ????margin:?0;?
  11. ????padding:?0;?
  12. }?

看看这一大坨东西啊,难道不是跟上面的 * 选择器一个用途么?对每个元素(至少是常用元素),添加样式。其实作用是一样的,并且就算没有这一坨,浏览器内置样式也在对每个元素设置样式。之后 HTML 文件中的每一个元素,可以很容易找到自己应当呈现的样式了。GAmHTML5中文学习网 - HTML5先行者学习网

那么,对于之后添加的,会不会有性能影响呢?也不会,由于CSS规则已经确定并索引了,所以今后增加的元素也不过就是简单比对一下而已,不会多走一步的。GAmHTML5中文学习网 - HTML5先行者学习网

所以,由此得出结论,只要有需要,大胆的使用 * 吧,他不会给你从性能上增加额外的麻烦。GAmHTML5中文学习网 - HTML5先行者学习网

最后补两个前端优化小知识:GAmHTML5中文学习网 - HTML5先行者学习网
1,由于CSS规则和HTML是并行载入的,因此把CSS放在HEAD中是非常有必要的。GAmHTML5中文学习网 - HTML5先行者学习网
2,少使用 :last-child 。因为这个选择器无法索引起来,必须等DOM构件完,才能知道他是不是父元素中最后的那个 元素。这种就非常慢了,慎用。GAmHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助