你對(duì)CSS渲染速度的概念是否了解，這里和大家分享一下10條影響CSS渲染速度的寫法，相信本文介紹一定會(huì)讓你有所收獲。

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

這篇文章主要寫的提高網(wǎng)頁(yè)在客戶端瀏覽器的渲染速度的CSS部分，暫時(shí)總結(jié)了10條。

1、*{}#zishu*{}盡量避開(kāi)

由于不同瀏覽器對(duì)HTML標(biāo)簽的解釋有差異，所以最終的網(wǎng)頁(yè)效果在不同的瀏覽器中可能是不一樣的，為了消除這方面的風(fēng)險(xiǎn)，設(shè)計(jì)者通常會(huì)在CSS的一個(gè)始就把所有標(biāo)簽的默認(rèn)屬性全部去除，以達(dá)到所有簽標(biāo)屬性值都統(tǒng)一的效果。所以就有了*通配符。*會(huì)遍歷所有的標(biāo)簽；

*{margin:0;padding:0}  
 

如果這樣寫，頁(yè)面中所有的標(biāo)簽的margin全是0；padding也是0；

#zishu*{margin:0;padding:0}  
 

如果這樣寫，在id等于zishu下邊的所有標(biāo)簽的margin全是0；padding也是0；

這樣寫的問(wèn)題是：

a.遍歷會(huì)消耗很多的時(shí)間，如果你的HTML代碼寫的不規(guī)范或是某一簽標(biāo)沒(méi)有必合，這個(gè)時(shí)間可能還會(huì)更長(zhǎng)；
b.很多的標(biāo)簽本來(lái)就沒(méi)有這個(gè)屬性或?qū)傩员旧砭褪墙y(tǒng)一的，那么更給設(shè)置一次，也有時(shí)間的開(kāi)消；

建議的的解決辦法：
a.不要去使用生僻的標(biāo)簽，因?yàn)檫@些標(biāo)簽往往在不同瀏覽器中解釋出來(lái)的效果不一樣；所以你要盡可能的去使用那些常用的標(biāo)簽；
b.不要使用*；而是把你常用到的這些標(biāo)簽進(jìn)行處理；例如：body,li,p,h1{margin:0;padding:0}

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

IE的一些濾鏡在FIREFOX中不支持，往往寫一些效果時(shí)你還是使用CSSHACK；而濾鏡是一個(gè)非常毫資源的東西；特別是一些羽化、陰影和一個(gè)前透明的效果；

例如一個(gè)陰影效果：
 

<style> 
body{margin:100px;}  
#login_b{width:200px;height:200px;background:#000;  
-moz-opacity:0.2;filter:alpha(opacity=20);margin:  
-30px00600px;position:absolute;}  
#login_t{z-index:10;border:1pxsolid#006600;  
width:200px;height:200px;background:#FFF;  
margin:-35px00595px;position:absolute;}  
#info{background:#009900;height:155px;}  
style> 
 
<dividdivid="info"> 
<dividdivid="login_t">testdiv> 
<dividdivid="login_b">div> 
div> 
 

 例子的鏈接為：http://www.zishu.cn/blogview.asp?logID=610
百姓網(wǎng)的登陸部分使用了陰影效果：http://shanghai.baixing.com/wo/denglu

建議的解決辦法：

a.能不使用就不要使用，一方面兼容問(wèn)題；很多效果只能在IE中使用；
b.就本例而言，如果非要這樣在的效果，建議用圖片作背景；（只說(shuō)優(yōu)化速度，實(shí)際應(yīng)用還是可以小部分用，有人可能會(huì)說(shuō)，用圖片還多一個(gè)HTTP請(qǐng)求呢，呵呵……）

一個(gè)非常好的例子，就是在今年512大地震時(shí)，很多網(wǎng)站一夜之間全部變成了灰色，他們只用了一行CSS代碼：

查看復(fù)制打印 

body{filter:gray;}  
 
body{filter:gray;}  
 

 但，你會(huì)看會(huì)看到這些網(wǎng)頁(yè)非常的慢，打開(kāi)后你的CPU也會(huì)飆升，不夸張的說(shuō)，如果你的電腦配置差，干死你也不為過(guò)。[mrgreen]#p#

3、一個(gè)頁(yè)面上少用絕對(duì)定位

絕對(duì)定位（position:absolute）是網(wǎng)頁(yè)布局中很常用到的，特別是作一些浮動(dòng)效果時(shí)，也會(huì)讓頁(yè)面看起來(lái)非常的酷。但網(wǎng)頁(yè)中如果使用過(guò)多的絕對(duì)定位，會(huì)讓你的網(wǎng)頁(yè)變得非常的慢，這一點(diǎn)上邊FIREFOX表現(xiàn)要比IE還要差。

例如：

查看復(fù)制打印 

<style>li{position:absolute;}style> 
<ul> 
<listylelistyle="left:10px;top:20px">001li> 
<listylelistyle="left:30px;top:70px">001li> 
<listylelistyle="left:40px;top:50px">001li> 
……  
ul> 
 
<style>li{position:absolute;}style> 
<ul> 
 <listylelistyle="left:10px;top:20px">001li> 
 <listylelistyle="left:30px;top:70px">001li> 
 <listylelistyle="left:40px;top:50px">001li> 
 ……  
ul> 
 

 建議的解決辦法：

a.盡可能少用，這個(gè)少用的值是多少，也沒(méi)有一個(gè)非常好的值來(lái)說(shuō)明；還要看絕定定位這個(gè)標(biāo)簽里邊的內(nèi)容的多少；在這里我只能說(shuō)，這樣寫會(huì)有性能問(wèn)題，少用。
b.如果能用變通實(shí)現(xiàn)同樣的效果，就用變通的辦法。

4、background背景圖片的平鋪

有些網(wǎng)頁(yè)的背景或頁(yè)面中某塊的背景通常要用到圖片的平鋪，平鋪后就會(huì)有平鋪次數(shù)的問(wèn)題，如果是單次還好，如果是多次，就廢了。

舉個(gè)簡(jiǎn)單的例子：

例一：滾動(dòng)一下你的頁(yè)面，看速度怎么樣？

<divstyledivstyle="height:8000px;  
background:url(http://www.zishu.cn/attachments/  
month_0809/i2008962026.gif)">div> 

例二：同樣效果，再試一下這個(gè)！ 

<divstyledivstyle="height:8000px;  
background:url(http://www.zishu.cn/attachments  
/month_0809/120089620424.gif)">div> 

說(shuō)明：測(cè)試上邊的兩個(gè)效果，你的電腦越差越明顯，如果你的電腦配置非常好，你就把上的8000px改成9000000px試一下，如果還不行，就改的更大一些，整死機(jī)別罵我！[razz]

建議的作法：

a.色彩少的圖片要作成gif圖片；
b.平鋪的圖片盡可能大一些，如果是色彩少的GIF圖片，圖片大一些，實(shí)際大小也不會(huì)大多少；上邊的兩個(gè)例子就很好的證明，第一個(gè)圖片非常少，第二個(gè)圖大較大一些；但速度是非常不一樣的；#p#

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

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

簡(jiǎn)單的一個(gè)例子：

查看復(fù)制打印 

<style> 
a:link,a:visited{color:#0000FF}  
a:hover,a:active{color:#FF0000}  
#zishua:link,#zishua:visited{font-weight:bold}  
#zishua:hover,#zishua:active{font-style:italic;}  
style> 
<div><ahrefahref="#">testa><div> 
<dividdivid="zishu"><ahrefahref="#">zishua>div> 
 
<style> 
a:link,a:visited{color:#0000FF}  
a:hover,a:active{color:#FF0000}  
#zishua:link,#zishua:visited{font-weight:bold}  
#zishua:hover,#zishua:active{font-style:italic;}  
style> 
<div><ahrefahref="#">testa><div> 
<dividdivid="zishu"><ahrefahref="#">zishua>div> 
 
<style> 
a:link,a:visited{color:#0000FF}  
a:hover,a:active{color:#FF0000}  
#zishua:link,#zishua:visited{font-weight:bold}  
#zishua:hover,#zishua:active{font-style:italic;}  
style> 
<div><ahrefahref="#">testa><div> 
<dividdivid="zishu"><ahrefahref="#">zishua>div> 
 

 實(shí)際上我是讓zishu去繼承我默認(rèn)設(shè)置的屬性，因?yàn)槟切傩砸呀?jīng)存在了。

另外再說(shuō)幾個(gè)不是特別重要的地方，平時(shí)注意一點(diǎn)就行了，沒(méi)有上邊這幾個(gè)影響那么大。#p#

6、CSS的路徑別太深；

例如：

查看復(fù)制打印 

#zishu#info#tool#sidebarh2{font-size:12px;}  
 
#zishu#info#tool#sidebarh2{font-size:12px;}  
 

 7、能簡(jiǎn)寫的一些就簡(jiǎn)寫；

例如

#zishu{pading-top:10px;padding-right:50px;  
padding-left:50px;padding-bottom:4px;}  
改成：#zishu{padding:10px50px4px50px}  

這個(gè)對(duì)渲染速度沒(méi)有影響；只是少幾個(gè)字符；[lol]

8、別放空的的class或沒(méi)有的class在HTML代碼中。

9、float的應(yīng)用

這個(gè)東西我的感覺(jué)是如果使用不當(dāng)，百分百有性能問(wèn)題，而且還非常的大，但實(shí)在不知道怎么樣能弄一個(gè)例子出來(lái)；這里只能建議大家如果不是很明白float是怎么工作的，還是少使用為妙。
曾經(jīng)因?yàn)檫@個(gè)把IE干死過(guò)，我寫過(guò)一個(gè)例子，雖說(shuō)和這個(gè)沒(méi)有什么太大的關(guān)系：IE之死__原來(lái)與CSS有關(guān)[/url]

10、合理的布局

為什么這么說(shuō)呢，合理的布局，可以改變CSS的寫法以及渲染過(guò)程。

其實(shí)有些不能總結(jié)為CSS部分；

相關(guān)的數(shù)據(jù)請(qǐng)參考：[url=http://www.zishu.cn/blogview.asp?logID=834]http://www.zishu.cn/blogview.asp?logID=834
 

【編輯推薦】

1. 5種方法解決CSS實(shí)現(xiàn)垂直居中問(wèn)題
2. CSS層疊與繼承用法手冊(cè)
3. DIV布局規(guī)范中CSS類及id命名方式
4. 簡(jiǎn)單實(shí)用的五個(gè)CSS屬性
5. 將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧