首頁 > web前端 > css教學 > 主體

10條影響CSS渲染速度的寫法與使用建議第1/3頁_經驗交流

PHP中文网
發布: 2016-05-16 12:04:53
原創
1205 人瀏覽過

最近很少寫css了,以後也可能寫的會很少了,所以還是想把自已的一些經驗能和大家分享一下,希望能給大家一些幫助!

這篇文章主要寫的提高網頁在客戶端瀏覽器的渲染速度的css部分,暫時總結了10條。

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

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

*{margin:0; padding:0}
登入後複製


如果這樣寫,頁面中所有的標籤的margin全是0;padding也是0;

#jb51 *{margin:0; padding:0}
登入後複製


如果這樣寫,在id等於jb51下邊的所有標籤的margin全是0;padding也是0;

這樣寫的問題是:
a.遍歷會消耗很多的時間,如果你的html代碼寫的不規範或是某一簽標沒有必合,這個時間可能還會更長;
b.很多的標籤本來就沒有這個屬性或屬性本身就是統一的,那麼更給設定一次,也有時間的開消;

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

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

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

例如一個陰影效果:

 

 
test
 
 
登入後複製


建議的解決方法: 
a.能不使用就不要使用,一方面相容問題;很多效果只能在ie中使用; 
b.就本例而言,如果非要這樣在的效果,建議用圖片作背景;(只說優化速度,實際應用還是可以小部分用,有人可能會說,用圖片還多一個 
http請求呢,呵呵…) 

一個非常好的例子,就是在今年512大地震時,很多網站一夜之間全部變成了灰色,他們只用了一行css程式碼: 


程式碼 

body{filter: gray;}
登入後複製




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

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

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

例如: 

程式碼 

 
      001  001  001  …… 
登入後複製

建議的解決方法: 
a.盡可能少用,這個少用的值是多少,也沒有一個非常好的值來說明;還要看絕定定位這個標籤裡邊的內容的多少;在這裡我只能說,這樣寫 
會有效能問題,少用。 
b.如果能用變通達到同樣的效果,就用變通的辦法。

4、background 背景圖片的平鋪 

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

舉個簡單的例子: 

例一:捲動一下你的頁面,看速度怎麼樣? 

登入後複製

例二:一樣效果,再試一下這個!

登入後複製


說明:測試上邊的兩個效果,你的電腦越差越明顯,如果你的電腦配置非常好,你就把上的8000px改成9000000px試一下,如果還不行,就改的 
更大一些,整死機別罵我!

建議的做法: 
a.色彩少的圖片要作gif圖片; 
b.平舖的圖片盡可能大一些,如果是色彩少的gif圖片,圖片大一些,實際大小也不會大多少;上邊的兩個例子就很好的證明,第一個圖片非常 
少,第二個圖大較大一些;但速度是非常不一樣的;

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

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

簡單的例子: 

 
test
  jb51
登入後複製
登入後複製
 
test
  jb51
登入後複製
登入後複製

其實我是讓jb51去繼承我預設的屬性,因為那些屬性已經存在了。

另外再說幾個不是特別重要的地方,平常注意一點就行了,沒有上邊這幾個影響那麼大: 

6、css的路徑別太深;
例如: 

程式碼 

#jb51 #info #tool #sidebar h2{ font-size:12px;}
登入後複製




7、能簡寫的一些就簡寫; 
例如:

#jb51{pading-top:10px; padding-right:50px; padding-left:50px; padding-bottom:4px;}
登入後複製

改成:

#jb51{padding:10px 50px 4px 50px}
登入後複製

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

8、別放空的的class或沒有的class在html程式碼中;

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

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

其實有些不能總結為css部分; 

 以上就是10條影響css渲染速度的寫法與使用建議第1/3頁_經驗交流的內容,更多相關內容請關注php中文網(m.sbmmt.com)!


相關標籤:
來源:php.cn
上一篇:談網頁設計中的字體應用Font Set_經驗交流 下一篇:CSS expression控制圖片自動縮放效果程式碼[相容 IE,Firefox]_經驗交流
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
相關專題
更多>
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!