本文尚未有测试数据支持,以下结论仅是根据现有情况的一种解释。
关于 * 这个选择器,一直有个疑惑,到底是否影响效率。在先前的观念中,这由于要匹配所有的元素,让每一个元素都带上这个属性,所以会影响页面的效率。但近来的思考,觉得这应该不会影响效率。为此还特地写过一篇博文,里边提到了这点:真的还需要reset.css么?
而这篇文章中我打算着重阐述为何 * 这个选择器不会影响效率。
上周六去参加了 web标准化交流会,席间 winter 从浏览器(webkit)的角度分享了关于页面渲染的过程。其PPT也可以在前面的链接中下载到。
其中一个很重要的过程是,当页面载入过程中,CSS 和 HTML 是并行下载的。并且通常CSS是在HEAD中引入的,并且体积不如HTML大,所以CSS会先下载完。下载的过程中浏览器就已经开始对CSS中的规则进行索引,也就是已经确定哪一个元素呈现的样式是如何的了。同时,浏览器根据HTML构建出的DOM树,其中的每一个元素会直接去CSS规则索引中去比对,构建出渲染树。这个过程都是并行的,并且CSS规则是进行了索引的,因此速度非常的快速。
那么我们看看CSS规则的来源主要有2个,一是浏览器内置的元素样式,Firefox 3.x版是放在目录下的res文件夹内,4.0版和Chrome中没找到(这里是我的主观臆断不太可靠,大家自行辨别),另一个就是页面提供的。根据查看 放在 res 文件夹下的 CSS 文件就可以得知,就是是什么样式都不写,已经为每一个HTML元素设定好了基本样式了。
那么看看我们所忌讳的事情,不用*{margin:0;padding:0},而是使用
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, font, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td {
- margin: 0;
- padding: 0;
- }
看看这一大坨东西啊,难道不是跟上面的 * 选择器一个用途么?对每个元素(至少是常用元素),添加样式。其实作用是一样的,并且就算没有这一坨,浏览器内置样式也在对每个元素设置样式。之后 HTML 文件中的每一个元素,可以很容易找到自己应当呈现的样式了。
那么,对于之后添加的,会不会有性能影响呢?也不会,由于CSS规则已经确定并索引了,所以今后增加的元素也不过就是简单比对一下而已,不会多走一步的。
所以,由此得出结论,只要有需要,大胆的使用 * 吧,他不会给你从性能上增加额外的麻烦。
最后补两个前端优化小知识:
1,由于CSS规则和HTML是并行载入的,因此把CSS放在HEAD中是非常有必要的。
2,少使用 :last-child 。因为这个选择器无法索引起来,必须等DOM构件完,才能知道他是不是父元素中最后的那个 元素。这种就非常慢了,慎用。
Pingback: web标准化交流会 » Blog Archive » web标准化交流会第十四期会后文章收集
有道理啊.不过可能需要实际验证一番.在想验证方法中.
暂时还是使用reset,使用“*”这个问题如果有详细认真的测试会考虑。
有一个问题没有考虑:
使用*调试的时候有点不方便。在firebug下查看样式,会发现每一个父元素都被赋予相同的样式(通常是margin:0;padding:0),同时被划线覆盖掉,样式表的继承性很低。
反正我现在写样式表,尽量做到在firebug下查看样式的时候,尽可能少出现被覆盖掉的样式,能让我的css文件体积更小。
我也是很反感firebug下看到一堆的划线覆盖的样式。然而自从用了reset之后,比如文中对一大坨元素做margin:0;padding:0,最后依然导致了每一级的父元素的样式被覆盖掉了。继承性同样很低。reset.css文件体积增加的同时没给我带来多大好处。
大侠,jquery的翻译目前移到了github,下载来编译都是一个个html,如何做chm啊,比如zend framework手册直接能编译得到hpp什么的
你好,由于尚未翻译完成,所以我还没做进一步编译成CHM版的工作呢。
Pingback: 关于css通配符性能问题不完全测试 | Hi,丸子
reset.css文件体积增大但性能有提升,又没别的副作用。尽尽只是因为 * 看起来好看而用他,但影响了性能是得不尝失的。
如果真的 * 影响了性能,那当然是得不偿失。但至今没有可靠证据可以证明 * 会影响性能。同时从浏览器解析渲染的过程来分析也得不到影响性能的途径啊……
最新的一个CSS性能分析文章,不只 * 对性能有影响哦
http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes
大赞,非常感谢提供宝贵的资料。终于有数据出来了!
虽然看到有影响这个事实让我有点不甘心,不过看到都是1ms以下的数量级,我又坦然了。哈哈~