影響CSS渲染速度的寫法有哪些

今天小編給大家分享一下影響CSS渲染速度的寫法有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

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

*{margin:0; padding:0}

建議的的解決辦法：

不要去使用生僻的標簽，因為這些標簽往往在不同瀏覽器中解釋出來的效果不一樣;所以你要盡可能的去使用那些常用的標簽;

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

IE的一些濾鏡在FIREFOX中不支持，往往寫一些效果時你還是使用CSS HACK;而濾鏡是一個非常毫資源的東西;特別是一些羽化、陰影和一個前透明的效果;

建議的解決辦法：

能不使用就不要使用，一方面兼容問題;很多效果只能在IE中使用;

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

body{filter: gray;}

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

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

建議的解決辦法：

盡可能少用，這個少用的值是多少，也沒有一個非常好的值來說明;還要看絕定定位這個標簽里邊的內容的多少。

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

4、background 背景圖片的平鋪

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

建議的作法：

色彩少的圖片要作成gif圖片;

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

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

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

6、CSS的路徑別太深

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

7、能簡寫的一些就簡寫

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

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

9、float 的應用

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

10、合理的布局

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

以上就是“影響CSS渲染速度的寫法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。