高效css 寫法

來源:互聯網
上載者:User

以下文章是  翻譯 google高效css寫法

文章地址:http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors 

使用高效的css樣式

總體

避免一些低效的key selectors去匹配大量的元素能夠加速頁面的展現 。

細節 

當瀏覽器解析html的時候,它構造了一個文檔樹來展現所有被顯示的元素。 它在特定的樣式表中去匹配元素,根據標準的css的層疊,繼承和順序規則,

在mozilla的實現中(可能其他的也是這樣),對於每一個元素,css引擎通過規則去尋找匹配,css引擎評估每一個規則是從右至左的,從最右的selector開始,

 也稱之為key selector,直到找到匹配為止。

根據這個規則,越少的規則使用,css引擎將評估的越好。因此,移除沒有用的css是改善頁面效能的重要一步。之後,對於頁麵包含很多的元素的css規則, 

最佳化這些規則也有利於提高頁面的效能。最佳化頁面效能最重要的一點在於使用明確的,避免不需要冗餘的,使引擎系統快速的匹配到元素而不需要花費太多的時間。

下面的這些規則被認為是低效的 

(1)使用了後代選取器

1.使用全域選取器作為key 

eg:body * {...}
.hide-scrollbars * {...} 

2.使用了標籤選取器作為key

eg:ul li a {...}

     #footer h3 {...} 

(2)使用子選取器和相鄰選取器

1.使用全域選取器作為key

eg:body > * {...}
.hide-scrollbars > * {...} 

2.使用標籤選取器作為key

eg: ul > li > a {...}

 

      #footer > h3 {...}

子選取器和相鄰選取器是低效的是因為對於每一個元素的匹配,瀏覽器不得不評估其他的一些元素,它需要雙倍的時間耗費在匹配上。同時,越少的精確的

key,越多的時間花費在匹配元素上面。儘管如此,即使是不高效的,他們比後代選取器的使用的效果要好一點。

(3)過渡的限定選取器

eg:ul#top_blue_nav {...}
form#UserLogin {...} 

id選取器是唯一的,包含了tag或者class的限定僅僅是增加了一些無用的資訊(瀏覽器去評估) 

(4)使用:hover在一些沒有:hover的元素上面

eg:h3:hover {...}

   .foo:hover {...}

 在非標準模式下面。ie7,ie8將忽略這些規則。在標準模式下面,可能會導致一些效能的退化

推薦的方式 

(1)避免使用全域樣式

允許一個元素去繼承它的祖先,或者使用一個class去應用複雜的元素。

(2)將規則寫的越精確越好

偏向使用class ,id,少使用tag

(3)移除一些無用的限定

下面的這些限定是多餘的

1.id選取器被class 或者tag選取器限定

2.class被tag選取器進行限定(如果一個class只被用於一個tag,這也是很好的實踐) 

(4)避免使用後代選取器,特別是包含了一些無用的祖先元素

eg:body ul li a{...} 制定了一個無用的body限定,因為所有的元素都是在body中。

(5)使用class選取器取代後代選取器

eg:如果你需要兩個不同的樣式(一個無序列表,一個有序列表)

不要使用下面的樣式

ul li {color:blue} ol li {color:red} 

應該這樣的使用 .unordered-list-item {color: blue;}

     .ordered-list-item {color: red;}

如果你一定要用後代選取器,建議你使用子選取器

(6)避免使用:hover在一些沒有串連的元素上面(對於ie序列的) 

如果你使用:hover在一些不需連線的元素上面,ie7,8會認為他們是無用的。建議使用事件onmouseover 來類比

--------END------- 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.