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

本文尚未有测试数据支持,以下结论仅是根据现有情况的一种解释。

关于 * 这个选择器,一直有个疑惑,到底是否影响效率。在先前的观念中,这由于要匹配所有的元素,让每一个元素都带上这个属性,所以会影响页面的效率。但近来的思考,觉得这应该不会影响效率。为此还特地写过一篇博文,里边提到了这点:真的还需要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构件完,才能知道他是不是父元素中最后的那个 元素。这种就非常慢了,慎用。

《CSS通用元素选择器的都市流言》有12个想法

  1. 暂时还是使用reset,使用“*”这个问题如果有详细认真的测试会考虑。
    有一个问题没有考虑:
    使用*调试的时候有点不方便。在firebug下查看样式,会发现每一个父元素都被赋予相同的样式(通常是margin:0;padding:0),同时被划线覆盖掉,样式表的继承性很低。
    反正我现在写样式表,尽量做到在firebug下查看样式的时候,尽可能少出现被覆盖掉的样式,能让我的css文件体积更小。

    1. 我也是很反感firebug下看到一堆的划线覆盖的样式。然而自从用了reset之后,比如文中对一大坨元素做margin:0;padding:0,最后依然导致了每一级的父元素的样式被覆盖掉了。继承性同样很低。reset.css文件体积增加的同时没给我带来多大好处。

  2. 大侠,jquery的翻译目前移到了github,下载来编译都是一个个html,如何做chm啊,比如zend framework手册直接能编译得到hpp什么的

  3. reset.css文件体积增大但性能有提升,又没别的副作用。尽尽只是因为 * 看起来好看而用他,但影响了性能是得不尝失的。

    1. 如果真的 * 影响了性能,那当然是得不偿失。但至今没有可靠证据可以证明 * 会影响性能。同时从浏览器解析渲染的过程来分析也得不到影响性能的途径啊……

        1. 大赞,非常感谢提供宝贵的资料。终于有数据出来了!
          虽然看到有影响这个事实让我有点不甘心,不过看到都是1ms以下的数量级,我又坦然了。哈哈~

  4. 是呀,像我们这些菜鸟,之前看到大伙都说要用重设样式,就跟风用了,但具体原由真一点也不懂,也尝试去查些资料验证为何,但也没有真正找到一篇很权威的文章支撑。

发表评论