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

2022-07-29 03:21:13 字數 1734 閱讀 6650

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

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

*建議的的解決辦法:

1)不要去使用生僻的標籤,因為這些標籤往往在不同瀏覽器中解發布來的效果不一樣;所以你要盡可能的去使用那些常用的標籤;

2)不要使用*;而是把你常用到的這些標籤進行處理;例如:body,li,p,h1

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

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

建議的解決辦法:

1)能不使用就不要使用,一方面相容問題;很多效果只能在ie中使用;

2)就本例而言,如果非要這樣在的效果,建議用作背景;(只說優化速度,實際應用還是可以小部分用,有人可能會說,用還多乙個http請求呢,呵呵……)

body

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

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

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

建議的解決辦法:

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

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

4、background 背景的平鋪

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

建議的作法:

1)色彩少的要作成gif;

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

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

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

6、css的路徑別太深;

#zishu #info #tool #sidebar h2

7、能簡寫的一些就簡寫;

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

8、別放空的的class或沒有的class在html**中;

9、float 的應用

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

曾經因為這個把ie乾死過,我寫過乙個例子,雖說和這個沒有什麼太大的關係:ie之死__原來與css有關

10、合理的布局

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

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

熱度 8 已有 399 次閱讀 2014 9 10 13 53 系統分類 html css 1 zishu 盡量避開 由於不同瀏覽器對html標籤的解釋有差異,所以最終的網頁效果在不同的瀏覽器中可能是不一樣的,為了消除這方面的風險,設計者通常會在css的乙個始就把所有標籤的預設屬性全部去除,以達到所...

CSS提高渲染速度的寫法

經常有前端開發人員使用 來進行css重置,這種方法雖然寫起來簡單,但是渲染起來瀏覽器引擎要遍歷所有的標籤,很影響效率,強烈建議不要這樣使用!建議的的解決辦法 把你常用到的這些標籤進行處理 例如 body,li,p,h1,可以參考一下大 的css重置 絕對定位 position absolute 是網...

CSS的10條重要原則

發現國外的css玩家總結得還不錯。這裡翻譯一下,作為以後自己的開發箴言 1.盡量保持css簡單 這個簡單主要指的是不要使用css hack,這是非常危險的,儘管hack可以暫時解決一下不相容的問題,但是後期的維護可以用可怕來形容。2.讓css命令保持在一行。例如 good bad h2 3.盡量使用...