CSS 優化 提高效能的方法

2021-08-15 16:45:02 字數 1066 閱讀 4259

**:

如何提高css效能,根據頁面的載入效能和css**效能,主要總結有下面幾點:

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

有時候為了圖方便或者快速搞定功能,我們可能會直接將樣式寫在頁面的style標籤或者直接內聯在元素上,這樣雖然簡單方便,但是非常不利於日後的維護。將**寫成單獨的css檔案有幾點好處:

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

(2)減少頁面體積

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

2、不使用@import

這條手段已經是眾所周知,這裡簡單提一下,@import影響css檔案的載入速度

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

有時候專案的模組越來越多,功能越來越複雜,我們寫的css選擇器會內套多層,越來越複雜。

建議選擇器的巢狀最好不要超過三層,比如:

.header .logo .text{}
可以優化成

.haeder .logo-text{}
簡潔的選擇器不僅可以減少css檔案大小,提高頁面的載入效能,瀏覽器解析時也會更加高效,也會提高開發人員的開發效率,降低了維護成本。

4、精簡頁面的樣式檔案,去掉不用的樣式

很多時候,我們會把所有的樣式檔案合併成乙個檔案,但是這樣有乙個問題:很多其他頁面的css同時引用到當前頁面中,而當前頁面並沒有用到它們,這種情況會造成兩個問題:

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

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

正確的處理方法是根據當前頁面需要的css去合併那些當前頁面用到的css檔案。

5、利用css繼承減少**量

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

常見的可以繼承的屬性比如:

color,font-size,font-family等等

不可繼承的比如:

position,display,float等

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

CSS 優化 提高效能的方法

如何提高css效能,根據頁面的載入效能和css 效能,主要總結有下面幾點 1 盡量將樣式寫在單獨的css檔案裡面,在head元素中引用 有時候為了圖方便或者快速搞定功能,我們可能會直接將樣式寫在頁面的style標籤或者直接內聯在元素上,這樣雖然簡單方便,但是非常不利於日後的維護。將 寫成單獨的css...

css 列舉CSS優化 提高效能的方法

載入效能 壓縮css 通過link方式載入,而不是 import 復合屬性其實分開寫,執行效率更高,因為css最終也還是要去解析如 margin left left 選擇器效能 盡量少的使用巢狀,可以採用bem的方式來解決命名衝突 盡量少甚至是不使用標籤選擇器,這個效能實在是差,同樣的還有 選擇器 ...

CSS優化 提高效能的方法有哪些?

優化主要還是朝網路傳輸方面和減少不必要的渲染考慮 1.發布前壓縮css,減少資料傳輸量。2.合併屬性,如margine left 5px margine top 10px 這個就可以合併成一條的。3.合理設計css 布局,注意復用樣式,減少渲染上花的時間。class和id的選擇,少用 這種全域性匹配...