
好的文章,像是 Dave Hyatt 的「Writing Efficient CSS」(撰寫有效率的 CSS),能夠幫助
開發人員適應基本的選擇器比對(selector matching)觀念。我們從 Steve Souders(與其
他人)那學到,選擇器的比對是從右到左,而某些特定的選擇器的比對相當費力,應該最
好避免使用。舉例來說,我們知道 descendant selectors(子裔選擇器)很慢,特別是在最
右邊的選擇器匹配(match)頁面上許多元素之時。在我們一無所有時,這些資訊都是相
當寶貴的,不過現在事情已經改變。感謝 Antti Koivisto 了不起的努力成果,現在有許多
選擇器我們不再需要擔心。
Antti Koivisto 為 WebKit 核心貢獻了程式碼,而最近花了一些時間最佳化 CSS 選擇器的比
對動作。實際上,當他完成他的工作之後,他說了:
我的觀點是作者不應該需要擔心選擇器的最佳化(而就我所看到的,他們通常也沒
有),那應該是 CSS 引擎的工作。
哇!這聽起來真是太好了!我非常樂意以適合我架構的方式去使用選擇器,而讓描繪引擎
(rendering engine)去處理選擇器的優化工作。那麼他到底做了什麼呢?不僅一件事,他
建立了多層次的最佳化,讓我們來特別看一下其中四種:
Style sharing(樣式共享)
Rule hashes(規則雜湊)
Ancestor filters(祖代過濾器)
Fast path(快速路徑)
CSS Selector 的效能已 ...