首頁  >  文章  >  web前端  >  如何提升css效能

如何提升css效能

青灯夜游
青灯夜游原創
2021-05-12 11:55:433209瀏覽

提升方法: 1、將樣式寫在css檔案中,在head中引用;2、不使用「@import」;3、避免使用複雜的選擇器,層級越少越好;4、精簡頁面的樣式檔;5、利用CSS繼承減少程式碼量;6、慎重使用浮動、定位屬性;7、標準化各種瀏覽器前綴等。

如何提升css效能

本教學操作環境:windows7系統、CSS3版、Dell G3電腦。

如何提升CSS效能,根據頁面的載入效能和CSS程式碼效能,主要表現為: 載入效能 (主要從減少檔案體積,減少阻斷載入,提高並發面向入手) ,選擇器效能,渲染效能,可維護性。

 1、盡量將樣式寫在單獨的css檔案裡面,在head元素中引用

(1)內容和樣式分離,易於管理和維護

(2)減少頁面體積

(3)css檔案可以快取、重複使用,維護成本降低

2、不使用@import  

如果你使用@import屬性引入css的話,當使用者瀏覽的網速較慢時,他會看到一個沒有風格樣式的頁面,然後隨著CSS檔案被下載完成才可以看到應有的風格

#3、避免使用複雜的選擇器,層級越少越好  

專案的模組越來越多,功能越來越複雜,我們寫的CSS選擇器會內套多層,越來越複雜。建議選擇器的嵌套最好不要超過三層,簡潔的選擇器不僅可以減少css檔案大小,提高頁面的載入效能,瀏覽器解析時也會更加高效,也會提高開發人員的開發效率,降低了維護成本。

4、精簡頁面的樣式文件,去掉不用的樣式  

(1)樣式檔案偏大,影響載入速度

(2)瀏覽器會進行多餘的樣式匹配,影響渲染時間。

根據目前頁面需要的css去合併那些目前頁面用到的CSS文件, 合併成一個文件有一個優點:樣式文件會被瀏覽器緩存,進入到其他頁面樣式文件不用再去下載。

5、利用CSS繼承減少程式碼量 

我們知道有一部分CSS程式碼是可以繼承的,如果父元素已經設定了該樣式,子元素就不需要去設定該樣式,這也是提高效能的行之有效的方法。  

6、慎重使用高效能屬性:浮動、定位;  

一方面,浮動的種種複雜的佈局規則注定了它是一種試探性局部 reflow 式的佈局演算法。瀏覽器需要花費很多精力來處理它。另一方面,浮動元素的佈局牽涉到的因素更多。在同一佈局空間中,所有浮動元素均存在於“靜態層”之上的“浮動層”,不僅浮動層中的多個浮動元素會相互影響,浮動元素與靜態層也有互動。

7、css樣式前綴

標準化各種瀏覽器前綴,帶瀏覽器前綴的在前,標準的在後

8、css屬性值 

屬性值為0時,不加單位

屬性值為浮點數0.**時,可以省略小數點前的0 

#

以上是如何提升css效能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn