一張圖看懂HTML5的前端效能最佳化

佚名發表於2015-10-28

效能最佳化 程式碼最佳化 HTML5最佳化 HTML5教程 HTML5開發工具

概述

1. PC最佳化手段在Mobile側同樣適用

2. 在Mobile側我們提出三秒種渲染完成首屏指標

3. 基於第二點,首屏載入3秒完成或使用Loading

4. 基於聯通3G網路平均338KB/s(2.71Mb/s),所以首屏資源不應超過1014KB

5. Mobile側因手機配置原因,除載入外渲染速度也是最佳化重點

6. 基於第五點,要合理處理程式碼減少渲染損耗

7. 基於第二、第五點,所有影響首屏載入和渲染的程式碼應在處理邏輯中後置

8. 載入完成後使用者互動使用時也需注意效能

最佳化指南

[載入最佳化]

載入過程是最為耗時的過程,可能會佔到總耗時的80%時間,因此是最佳化的重點

· 減少HTTP請求

因為手機瀏覽器同時響應請求為4個請求(Android支援4個,iOS 5後可支援6個),所以要儘量減少頁面的請求數,首次載入同時請求數不能超過4個

a) 合併CSS、JavaScript

b) 合併小圖片,使用雪碧圖

· 快取

使用快取可以減少向伺服器的請求數,節省載入時間,所以所有靜態資源都要在伺服器端設定快取,並且儘量使用長Cache(長Cache資源的更新可使用時間戳)

a) 快取一切可快取的資源

b) 使用長Cache(使用時間戳更新Cache)

c) 使用外聯式引用CSS、JavaScript

· 壓縮HTML、CSS、JavaScript

減少資源大小可以加快網頁顯示速度,所以要對HTML、CSS、JavaScript等進行程式碼壓縮,並在伺服器端設定GZip

a) 壓縮(例如,多餘的空格、換行符和縮排)

b) 啟用GZip

· 無阻塞

寫在HTML頭部的JavaScript(無非同步),和寫在HTML標籤中的Style會阻塞頁面的渲染,因此CSS放在頁面頭部並使用Link方式引入,避免在HTML標籤中寫Style,JavaScript放在頁面尾

部或使用非同步方式載入

· 使用首屏載入

首屏的快速顯示,可以大大提升使用者對頁面速度的感知,因此應儘量針對首屏的快速顯示做最佳化

· 按需載入

將不影響首屏的資源和當前螢幕資源不用的資源放到使用者需要時才載入,可以大大提升重要資源的顯示速度和降低總體流量

PS:按需載入會導致大量重繪,影響渲染效能

a) LazyLoad

b) 滾屏載入

c) 透過Media Query載入

相關文章