本文尚未有測試數據支持,以下結論僅是根據現有情況的一種解釋。
關于 * 這個選擇器,一直有個疑惑,到底是否影響效率。在先前的觀念中,這由于要匹配所有的元素,讓每一個元素都帶上這個屬性,所以會影響頁面的效率。但近來的思考,覺得這應該不會影響效率。為此還特地寫過一篇博文,里邊提到了這點:真的還需要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構件完,才能知道他是不是父元素中最后的那個 元素。這種就非常慢了,慎用。