Skip to Main Content
高效能網站建置指南
book

高效能網站建置指南

by Steve Souders
January 2013
Intermediate to advanced content levelIntermediate to advanced
280 pages
5h 38m
Chinese
GoTop Information, Inc.
Content preview from 高效能網站建置指南
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; } ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

初探深度學習|使用TensorFlow

初探深度學習|使用TensorFlow

Reza Zadeh, Bharath Ramsundar
優雅的SciPy|Python科學研究的美學

優雅的SciPy|Python科學研究的美學

Juan Nunez-Iglesias, Stéfan van der Walt, Harriet Dashnow

Publisher Resources

ISBN: 9789862766583