移動web開發規範

標籤：android   style   http   io   ar   os   使用   sp   資料   

要考慮 Android低端機與 2G網路情境下效能

發布前必要檢查項

• 所有圖片必須有進行過壓縮
• 考慮適度的有損壓縮，如轉化為80%品質的jpg圖片
• 考慮把大圖切成多張小圖，常見在banner圖過大的情境

載入效能最佳化, 達到開啟足夠快

• 資料離線化，考慮將資料緩衝在 localStorage
• 初始請求資源數 < 4
• 圖片使用CSS Sprites 或 DataURI
• 外鏈 CSS 中避免 @import 引入
• 考慮內嵌小型的靜態資源內容
• 初始請求資源gzip後總體積 < 50kb
• 靜態資源(HTML/CSS/JS/Image)是否最佳化壓縮？
• 確保接入層已開啟Gzip壓縮（考慮提升Gzip層級，使用CPU開銷換取載入時間）
• 盡量使用CSS3代替圖片
• 初始首屏之外的靜態資源（JS/CSS）消極式載入
• 初始首屏之外的圖片資源按需載入（判斷可視地區）
• 單頁面應用(SPA)考慮消極式載入非首屏業務模組
• 開啟Keep-Alive鏈路複用

運行效能最佳化, 達到操作足夠流暢

• 避免 iOS 300+ms 點擊延時問題
• 緩衝 DOM 選擇與計算
• 避免觸發頁面重繪的操作
• Debounce連續觸發的事件(scroll / resize / touchmove等)，避免高頻繁觸發執行
• 儘可能使用事件代理，避免大量繫結事件
• 使用CSS3動畫代替JS動畫
• 避免在低端機上使用大量CSS3漸層陰影製作效果，可考慮降級效果來提升流暢度
• HTML結構層級保持足夠簡單
• 盡能少的使用CSS進階選取器與通配選取器
• Keep it simple

線上效能檢測評定工具使用指南

• 訪問 Google PageSpeed 線上評定網站
• 在地址欄輸入目標URL地址，點擊分析按鈕開始檢測
• 按 PageSpeed 分析出的建議進行最佳化，優先解決紅色類別的問題

移動web開發規範