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

seaside-371229_640

為什麼今天想要分享這篇文章呢?大家都喜歡看好看的網頁和很酷的網頁,但就我自己個人而言,往往點到一個很酷的網頁但是要開出來卻等到超級無敵之天荒地老的久時,又時候我會接把他關掉不看或是開出來後興致也減少一半了……所以今天分享這篇一般人和自己常見的毛病給你喔,希望對你有幫助

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

由於不同瀏覽器對HTML標籤的解釋有差異,所以最終的網頁效果在不同的瀏覽器中可能是不一樣的,為了消除這方面的風險,設計者通常會在CSS的一個始就把所有標籤的默認屬性全部去除,以達到所有簽標屬性值都統一的效果。所以就有了*通配符。 *會遍歷所有的標籤;
*{margin:0; padding:0}

建議的的解決辦法:
1)不要去使用生疏的標籤,因為這些標籤往往在不同瀏覽器中解釋出來的效果不一樣;所以你要盡可能的去使用那些常用的標籤;
2)不要使用*;而是把你常用到的這些標籤進行處理;例如:body,li,p,h1{margin:0; padding:0}

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

IE的一些濾鏡在FIREFOX中不支持,往往寫一些效果時你還是使用CSS HACK;而濾鏡是一個非常毫資源的東西;特別是一些羽化、陰影和一個前透明的效果;
建議的解決辦法:
1)能不使用就不要使用,一方面兼容問題;很多效果只能在IE中使用;
2)就本例而言,如果非要這樣在的效果,建議用圖片作背景;(只說優化速度,實際應用還是可以小部分用,有人可能會說,用圖片還多一個HTTP請求呢,呵呵……)
一個非常好的例子,就是在在512大地震時,很多網站一夜之間全部變成了灰色,他們只用了一行CSS代碼:
body{filter: gray;}
但,你會看會看到這些網頁非常的慢,打開後你的CPU也會飆升,不誇張的說,如果你的電腦配置差,幹死你也不為過。

3.一個頁面上少用絕對定位

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

建議的解決辦法:

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

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

4.background 背景圖片的平鋪
有些網頁的背景或頁面中某塊的背景通常要用到圖片的平鋪,平鋪後就會有平鋪次數的問題,如果是單次還好,如果是多次,就廢了。
建議的作法:
1)色彩少的圖片要作成gif圖片;
2)平舖的圖片盡可能大一些,如果是色彩少的GIF圖片,圖片大一些,實際大小也不會大多少;上邊的兩個例子就很好的證明,第一個圖片非常少,第二個圖大較大一些;但速度是非常不一樣的;

5.讓屬性盡可能多的去繼承
盡可能讓一些屬性子可以繼承父,而不是覆蓋父;

6、CSS的路徑別太深
#zishu #info #tool #sidebar h2{ font-size:12px;}

7.能簡寫的一些就簡寫
這個對渲染速度沒有影響;只是少幾個字符;

8.別放空的的class或沒有的class在HTML代碼中

9.float 的應用
這個東西我的感覺是如果使用不當,百分百有性能問題,而且還非常的大,但實在不知道怎麼樣能弄一個例子出來;這裡只能建議大家如果不是很明白float是怎麼工作的,還是少使用為妙。
曾經因為這個把IE幹死過,我寫過一個例子,雖說和這個沒有什麼太大的關係:IE之死__原來與CSS有關

10.合理的佈局
為什麼這麼說呢,合理的佈局,可以改變CSS的寫法以及渲染過程。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s