
220
|
第十四章
CSS 選擇器效能
面紗已揭露,現在來看看我們的 CSS 選擇器裡頭的效率不佳之處。選擇器從右到左讀
取之事實的揭露激勵我們當中許多人重新撰寫我們的規則,藉由 Doug Crockford 的指示
(參閱第 1 章),我們瞭解,在開始修正這個可能的效能議題之前,務必先量測該議題
的影響,以便聚焦在正確的重點上。
複雜的選擇器影響效能(有時候)
量測 CSS 選擇器效能的實驗結果發佈在 Jon Sykes 的三篇部落格文章裡,每一篇都是前
一篇的改進與淬煉,所以第三篇是最有用的
2
。Jon 的試驗包含五個頁面,總共 20,000 個
鏈結元素,每一個鏈結都具有
P
、
DIV
、
DIV
、
DIV
與
BODY
的祖先樹狀結構,每個頁面都
有不同的 CSS 類型︰
• “No Style”表示沒有 CSS。
• “Tag”有一條規則:
A { background-color: red; }
• “Class”有 20,000 個類別選擇器,每個鏈結一個;例如:
class11 { background-color: red; }
• “Descender”有 20,000 子孫選擇器,每個鏈結一個;例如:
div div div p a.class11 { background-color: red; }
• “Child”有 20,000 子選擇器,每個鏈結一個;例如:
div > div > div > p > a.class11 { background-color: red; } ...