CSS載入效能優化

2022-07-18 03:36:16 字數 897 閱讀 4761

將首屏頁面要用到的css檔案,放在頁面頭部載入,其他模組的css可以使用非同步載入:loadcss 和 preload。

1、通過rel="preload"進行內容預載入: 

2、preload 的w3文件: 

對於一些不是首屏載入的css,我們可以如下寫法:

"

preload

" href="

path/to/haorooms.css

"as="

style

" onload="

this.rel='stylesheet'

">

防止瀏覽器禁止js,保險起見,也可以如下

"

preload

" href="

path/to/haorooms.css

"as="

style

" onload="

this.rel='stylesheet'

">

"

preload

" href="

path/to/haorooms.css

"as="

style

" onload="

this.onload=null;this.rel='stylesheet'

">

因此,不考慮瀏覽器相容問題的情況下(考慮相容問題,可以使用loadcss,這裡不多演示),我們對上面**再次進行優化:

…class="

comments

">…

class="

about-me

">…

**:

css載入優化

為了避免讓使用者看到長時間的白屏時間,我們應該盡可能的提高css載入速度,比如可以使用以下幾種方法 1 使用cdn 因為cdn會根據你的網路狀況,替你挑選最近的乙個具有快取內容的節點為你提供資源,因此可以減少載入時間 2 對css進行壓縮 可以用很多打包工具,比如webpack,gulp等,也可以通...

UIImage 載入效能優化

uiimage 存在 延遲解壓的問題。這會占用時間。一旦檔案被載入就必須要進行解碼,解碼過程是乙個相當複雜的任務,需要消耗非常長的時間。解碼後的將同樣使用相當大的記憶體。用於載入的cpu時間相對於解碼來說根據格式而不同。對於png來說,載入會比jpeg更長,因為檔案可能更大,但是解碼會相對較快,而且...

CSS效能優化

css是負責布局和渲染的重要角色,漂亮的頁面當然能夠吸引使用者。本文是自己在開發過程中總結的關於css與效能的關係,可能有不對之處,希望能夠指出。1 所有的樣式盡量放在css檔案中,html標籤中不要寫style屬性,因為瀏覽器在所有的樣式載入完成之後,才會開始渲染整個頁面,寫在標籤屬性必會加長瀏覽...