10條影響CSS渲染速度的寫法與使用建議第2/3頁

更新時間：2008年09月06日 22:01:12 作者：

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

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

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

程序代碼
body{filter: gray;}

但，你會看會看到這些網頁非常的慢，打開后你的CPU也會飆升，不夸張的說，如果你的電腦配置差，干死你也不為過。

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

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

例如：

程序代碼

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

建議的解決辦法：
a.盡可能少用，這個少用的值是多少，也沒有一個非常好的值來說明；還要看絕定定位這個標簽里邊的內容的多少；在這里我只能說，這樣寫
會有性能問題，少用。
b.如果能用變通實現(xiàn)同樣的效果，就用變通的辦法。

4、background 背景圖片的平鋪

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

舉個簡單的例子：

例一：滾動一下你的頁面，看速度怎么樣？

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

例二：同樣效果，再試一下這個！

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

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