提升方法: 1、將樣式寫在css檔案中,在head中引用;2、不使用「@import」;3、避免使用複雜的選擇器,層級越少越好;4、精簡頁面的樣式檔;5、利用CSS繼承減少程式碼量;6、慎重使用浮動、定位屬性;7、標準化各種瀏覽器前綴等。
本教學操作環境: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中文網其他相關文章!