DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 簡化CSS選擇器
簡化CSS選擇器
編輯:CSS詳解     

本文是《Even Faster Web Sites: Performance Best Practices for Web Developers (Paperback)》的最後一章。上篇帖子《Performance Impact of CSS Selectors》(中文版)最後提出了一段假設:

對大多數網站而言,優化CSS選擇器活得的性能提升很小,不值得去計較。有些配合Javascript交互的CSS規則會明顯的拖慢頁面。這是應該關注的焦點。所以我開始關注現實中影響頁面性能的CSS樣式相關的小問題。

我收到了很多反饋。David Hyatt的文章《Writing EfficIEnt CSS for use in the Mozilla UI》披露:

樣式系統渲染一條規則是從最右邊開始之後依次向左移動。在你的小子樹(subtree)持續檢測的時候,樣式系統將繼續向左側移動直到它不匹配CSS規則或匹配錯誤。

由此得出,我們優化工作的重點應該是:匹配大量頁面元素的最右側的CSS選擇器。我上篇博文測試的CSS選擇器看起來很費性能,但是按這條新觀點審視,我們發覺這其實不值得擔心,比如:

DIV DIV DIV P A.class0007 {}

這個選擇器有5層,看起來很復雜,但是我們來看最右側的選擇器 A.class0007 ,我們發現,在整個頁面中需要浏覽器逆向匹配的只有一個元素。

優化CSS選擇器的關鍵點在於最右側的選擇器,也叫做key selector (巧合?)。有一個更昂貴的選擇器

A.class0007 * {}

盡管這個選擇器看起來更簡單,但對浏覽器匹配而言更昂貴。因為浏覽器要從右至左,開始後要檢查匹配 * 的所有元素。這意味著浏覽器會嘗試匹配頁面中的所有元素。下圖為普通選擇器與先前的後代選擇器加載時間的對比:

 

它清晰的反映出一個匹配很多元素的key selector會嚴重的拖慢頁面。其他可能會大量增加浏覽器工作的key selector包括:

A.class0007 DIV {}
#id0007 > A {}
.class0007 [href] {}
DIV:first-child {}

不是所有的CSS選擇器傷害性能,盡管看起來如此。CSS選擇器的關鍵點在於泛匹配的key selector。這對於含有大量DOM元素、CSS規則,更高 reflow 的Web 2.0應用更加重要。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved