標籤：

移動 H5（PC Web）前端性能優化指南

01-26

移動 H5 （PC Web）前端性能優化指南

概述

  1. PC 優化手段在 Mobile 側同樣適用
  2. 在 Mobile 側我們提出三秒種渲染完成首屏指標

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

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

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

  6. 基於第五點，要合理處理代碼減少渲染損耗

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

  8. 載入完成後用戶交互使用時也需注意性能

熊D註：鑒於第 1 條簡單修改了一下標題

優化指南

[載入優化]

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

  • 減少 HTTP 請求

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

    1. 合併 CSS、JavaScript
    2. 合併小圖片，使用雪碧圖

  • 緩存

使用緩存可以減少向伺服器的請求數，節省載入時間，所以所有靜態資源都要在伺服器端設置緩存，並且盡量使用長 Cache（長 Cache 資源的更新可使用時間戳）

  1. 緩存一切可緩存的資源
  2. 使用長 Cache（使用時間戳更新 Cache）

  3. 使用外聯式引用 CSS、JavaScript

熊D註：也許使用 MD5 指紋更加可靠

  • 壓縮 HTML、CSS、JavaScript

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

    1. 壓縮（例如，多餘的空格、換行符和縮進）
    2. 啟用 GZip
  • 無阻塞

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

熊D註：即使用 async 和 defer 屬性

  • 使用首屏載入

首屏的快速顯示，可以大大提升用戶對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化

熊D註：注意可交互元素的狀態管理

  • 按需載入

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

PS：按需載入會導致大量重繪，影響渲染性能

    1. LazyLoad
    2. 滾屏載入
    3. 通過 Media Query 載入

  • 預載入

大型重資源頁面（如遊戲）可使用增加 Loading 的方法，資源載入完成後再顯示頁面。但 Loading 時間過長，會造成用戶流失

對用戶行為分析，可以在當前頁載入下一頁資源，提升速度

    1. 可感知 Loading（如進入空間遊戲的 Loading）
    2. 不可感知的 Loading（如提前載入下一頁）

  • 壓縮圖片

圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然後使用智圖壓縮，同時在代碼中用 Srcset 來按需顯示

PS：過度壓縮圖片大小影響圖片顯示效果

  1. 使用智圖（ 智圖_圖片壓縮在線工具_在線製作webp ）

  2. 使用其它方式代替圖片（1. 使用 CSS3； 2. 使用 SVG； 3. 使用 IconFont）

  3. 使用 Srcset

  4. 選擇合適的圖片（1. webP 優於 JPG； 2. PNG8 優於 GIF）

  5. 選擇合適的大小（1. 首次載入不大於 1014KB； 2. 不寬於 640（基於手機屏幕一般寬度））

  • 減少 Cookie

Cookie 會影響載入速度，所以靜態資源域名不使用 Cookie

  • 避免重定向

重定向會影響載入速度，所以在伺服器正確設置避免重定向

  • 非同步載入第三方資源

第三方資源不可控會影響頁面的載入和顯示，因此要非同步載入第三方資源

[腳本執行優化]

腳本處理不當會阻塞頁面載入、渲染，因此在使用時需當注意

  • CSS 寫在頭部，JavaScript 寫在尾部或非同步

  • 避免圖片和 iFrame 等的空 Src

空 Src 會重新載入當前頁面，影響速度和效率

  • 盡量避免重設圖片大小

重設圖片大小是指在頁面、CSS、JavaScript 等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能

  • 圖片盡量避免使用 DataURL

DataURL 圖片沒有使用圖片的壓縮演算法文件會變大，並且要解碼後再渲染，載入慢耗時長

熊D註：使用 DataURL 來顯示的圖片一般尺寸都較小或結構較簡單，推薦優先使用 CSS 實現

[CSS 優化]

  • 盡量避免寫在 HTML 標籤中寫 Style 屬性

  • 避免 CSS 表達式

CSS 表達式的執行需跳出 CSS 樹的渲染，因此請避免 CSS 表達式

  • 移除空的 CSS 規則

空的 CSS 規則增加了 CSS 文件的大小，且影響 CSS 樹的執行，所以需移除空的 CSS 規則

  • 正確使用 Display 的屬性

Display 屬性會影響頁面的渲染，因此請合理使用

    1. display: inline 後不應該再使用 width、height、margin、padding 以及 float
    2. display: inline-block 後不應該再使用 float
    3. display: block 後不應該再使用 vertical-align
    4. display: table-* 後不應該再使用 margin 或者 float

  • 不濫用 Float

Float 在渲染時計算量比較大，盡量減少使用

  • 不濫用Web字體

Web 字體需要下載，解析，重繪當前頁面，盡量減少使用

  • 不聲明過多的 Font-size

過多的 Font-size 引發 CSS 樹的效率

  • 值為 0 時不需要任何單位

為了瀏覽器的兼容性和性能，值為 0 時不要帶單位

  • 標準化各種瀏覽器前綴

    1. 無前綴應放在最後
    2. CSS 動畫只用 （-webkit- 無前綴）兩種即可
    3. 其它前綴為 -webkit- -moz- -ms- 無前綴 四種，（-o- Opera 瀏覽器改用 blink 內核，所以淘汰）

熊D註：出於兼容性考慮是否棄用 -o- 有待看具體項目需求

  • 避免讓選擇符看起來像正則表達式

高級選擇器執行耗時長且不易讀懂，避免使用

熊D註：此外，嵌套過深的選擇器也應慎用，權重較大，解析速度慢且不利於 CSS 的模塊化

[JavaScript 執行優化]

  • 減少重繪和迴流

    1. 避免不必要的 Dom 操作
    2. 盡量改變 Class 而不是 Style，使用 classList 代替 className
    3. 避免使用 document.write
    4. 減少 drawImage

  • 緩存 Dom 選擇與計算

每次 Dom 選擇都要計算，緩存他

  • 緩存列表 .length

每次 .length 都要計算，用一個變數保存這個值

熊D註：執行過程中，任何使用超過兩次的變數，都應考慮緩存該變數以提高執行效率

  • 盡量使用事件代理，避免批量綁定事件

  • 盡量使用 ID 選擇器

ID 選擇器是最快的

  • TOUCH 事件優化

使用 touchstart、touchend 代替 click，因快影響速度快。但應注意 Touch 響應過快，易引發誤操作

[渲染優化]

  • HTML 使用 Viewport

Viewport 可以加速頁面的渲染，請使用以下代碼

<meta name="viewport" content="width_=device-width, initial-scale=1">

  • 減少 Dom 節點

Dom 節點太多影響頁面的渲染，應盡量減少 Dom 節點

  • 動畫優化

    1. 盡量使用 CSS3 動畫
    2. 合理使用 requestAnimationFrame 動畫代替 setTimeout
    3. 適當使用 Canvas 動畫 5 個元素以內使用 css 動畫，5 個以上使用 Canvas 動畫（iOS8 可使用 webGL）

  • 高頻事件優化

Touchmove、Scroll 事件可導致多次渲染

  1. 使用 requestAnimationFrame 監聽幀變化，使得在正確的時間進行渲染
  2. 增加響應變化的時間間隔，減少重繪次數

  • GPU 加速

CSS 中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發 GPU 渲染，請合理使用

PS：過渡使用會引發手機過耗電增加

熊D註：推薦拓展閱讀 > CSS動畫屬性性能 & 高性能 CSS3 動畫

參考資料

  • 移動頁面性能優化
  • [譯] 如何做到一秒渲染一個移動頁面
  • 首屏渲染優化提案反饋（原：Re: 答覆: 中文興趣小組5月5日電話會議）
  • HTML5遊戲前端開發秘籍
  • 被解放的GPU
  • CSS動畫
  • High Performance Animations
  • PageSpeed Insights規則
  • Best Practices for Speeding Up Your Web Site
  • How to lose weight (in the browser)
  • 關注 CSS Lint
  • HTML5應用開發功耗調優化小結
  • 理解WebKit和Chromium: Chromium WebView和Chrome瀏覽器渲染機制
  • Optimizing Performance — Web Fundamentals
  • 移動前端工作的那些事---前端製作之動畫效率問題簡析
  • Optimizing the Critical Rendering Path
  • 7 天打造前端性能監控系統
  • 數據驅動設計
  • 為你的移動頁面尋找一絲新意（技術篇）——手機互動網頁項目總結（下）
  • Image Optimization
  • [webapp的優化整理]要做移動前端優化的朋友進來看看吧
  • Egret Framework Canvas Renderer性能優化
  • Roundup on Parallel Connections
  • 2014年第二季度全國網速實測報告

本文由 @米隨隨 發表在 移動H5前端性能優化指南

讀後深表贊同，特來搬磚

最後：感謝原作者寫的好文~敬禮~

推薦閱讀：

※前端緩存策略與基於Webpack的靜態資源版本管理
※LsLoader 移動WEB工程化緩存方案
※LsLoader 專註移動web的工程化本地緩存前端組件
※網站性能優化——DNS預熱與合併HTTP請求
※頁面白屏有哪些檢測手段？

TAG:前端性能优化 | 前端开发 | Web开发 |