10條影響CSS渲染速度的寫法與建議

1、*{} #zishu *{} 盡量避開

由於不同瀏覽器對html標籤的解釋有差異，所以最終的網頁效果在不同的瀏覽器中可能是不一樣的，為了消除這方面的風險，設計者通常會在css的乙個始就把所有標籤的預設屬性全部去除，以達到所有籤標屬性值都統一的效果。所以就有了*萬用字元。*會遍歷所有的標籤；

*建議的的解決辦法：

1）不要去使用生僻的標籤，因為這些標籤往往在不同瀏覽器中解發布來的效果不一樣；所以你要盡可能的去使用那些常用的標籤；

2）不要使用*；而是把你常用到的這些標籤進行處理；例如：body,li,p,h1

2、濾鏡的一些東西不要去用

ie的一些濾鏡在firefox中不支援，往往寫一些效果時你還是使用css hack；而濾鏡是乙個非常毫資源的東西；特別是一些羽化、陰影和乙個前透明的效果；

建議的解決辦法：

1）能不使用就不要使用，一方面相容問題；很多效果只能在ie中使用；

2）就本例而言，如果非要這樣在的效果，建議用作背景；（只說優化速度，實際應用還是可以小部分用，有人可能會說，用還多乙個http請求呢，呵呵……）

body

但，你會看會看到這些網頁非常的慢，開啟後你的cpu也會飆公升，不誇張的說，如果你的電腦配置差，幹死你也不為過。

3、乙個頁面上少用絕對定位

絕對定位（position:absolute ）是網頁布局中很常用到的，特別是作一些浮動效果時，也會讓頁面看起來非常的酷。但網頁中如果使用過多的絕對定位，會讓你的網頁變得非常的慢，這一點上邊firefox表現要比ie還要差。

建議的解決辦法：

1）盡可能少用，這個少用的值是多少，也沒有乙個非常好的值來說明；還要看絕定定位這個標籤裡邊的內容的多少；在這裡我只能說，這樣寫會有效能問題，少用。

2）如果能用變通實現同樣的效果，就用變通的辦法。

4、background 背景的平鋪

有些網頁的背景或頁面中某塊的背景通常要用到的平鋪，平鋪後就會有平鋪次數的問題，如果是單次還好，如果是多次，就廢了。

建議的作法：

1）色彩少的要作成gif；

2）平鋪的盡可能大一些，如果是色彩少的gif，大一些，實際大小也不會大多少；上邊的兩個例子就很好的證明，第乙個非常少，第二個圖大較大一些；但速度是非常不一樣的；

5、讓屬性盡可能多的去繼承

盡可能讓一些屬性子可以繼承父，而不是覆蓋父；

6、css的路徑別太深；

#zishu #info #tool #sidebar h2

7、能簡寫的一些就簡寫；

這個對渲染速度沒有影響；只是少幾個字元；

8、別放空的的class或沒有的class在html**中；

9、float 的應用

這個東西我的感覺是如果使用不當，百分百有效能問題，而且還非常的大，但實在不知道怎麼樣能弄乙個例子出來；這裡只能建議大家如果不是很明白float是怎麼工作的，還是少使用為妙。

曾經因為這個把ie乾死過，我寫過乙個例子，雖說和這個沒有什麼太大的關係：ie之死__原來與css有關

10、合理的布局

為什麼這麼說呢，合理的布局，可以改變css的寫法以及渲染過程。