移動優化經驗

# 移動優化經驗

## 網絡加載

### 優化請求

- 優化請求包大小

* 代碼壓縮

* Gzip壓縮

* 不一樣網絡（2G/3G/4G/wifi）圖片尺寸

* 合理減小Header字段/cookie

* MTU策略(1500字節)

* 首屏加載時間控制

+ 3s完成（5s爲用戶最大容忍度）

+ 網絡平均速度(2.71Mb/s = 0.33875MBps(1Mbps=8MBps) = 346.88KBps)

+ 不超過1041KB，經驗值200K（考慮打開響應、網絡鏈接至少600ms）

- 減小請求次數（僅針對HTTP）

* 合併js、css文件、雪碧圖

+ 移動端雪碧圖(構建)

+ combo

* 避免重定向(一次重定向至少600ms)

* 避免重複資源請求

* 同時並行請求數量（android：4個，ios 5之後可支持6個）

- 解耦請求依賴

* 文件並行加載/依賴執行(構建+模塊化)

* 首屏CGI提早(組件)

* inline首頁必備js/css

* 異步加載非首屏

- 鏈接優化

* 支持keep-alive

* 網絡時間

+ DNS(2G：3.85785；3G：1.60643；WIFI：0.986921；unknown：1.67838)

+ TCP(2G：2.33482；3G：0.743109；WIFI：0.550208；unknown：1.20898)

+ RTT(2G：2.57478；3G：0.608047；WIFI：0.444332；unknown：1.30601)
+ Tran(2G：14.0374；3G：60.1967；WIFI：70.8728；unknown：36.3655)
* DNS Prefetch
* HTTP2/SPDY
* TCP握手/TLS密鑰協商

### 緩存策略

- Cache

* Browser Cache(一年)

* AppCache(選擇)

* 離線包(native下必須)

- Web Storage

* localStorage

* sessionStorage

* nativeStorage（native，>=4.6，大數據）

- Cookie

- Web DB

* indexedDB(推薦)

* Web SQL

- 合理緩存CGI數據(local/ajax)

### 加載策略

- 首屏加載

* Server Render(React-Node)

- 按需加載(組件化)

- lazyload(圖片、組件)

* 延遲加載圖片

* 滾動加載圖片

- Media Query

## 監控上報

### H5監控體系

- 成功/失敗率

* 圖片

* CDN文件

* CGI

* 直播/錄播播放

+ 加載

+ 斷流

- 測速(2G/3G/4G/wifi、組件)

* 首屏展現速度(首屏渲染)

* CGI測速

* CDN文件測速

* 圖片測速

* 直播/錄播播放

+ 加載

+ 斷流

- 版本覆蓋

* 離線包更新率

+ tdw：版本號、用戶、環境等

* 離線包覆蓋率

+ monitor

- 錯誤日誌

* badjs

* tryjs

- performance

* timing(ios 8不支持)

* resouce timing(緩存/非緩存，手機暫不支持)

### 視頻監控體系

- 直播播放

* 視頻加載流程監控(playing/paulse/timeupdate)

+ 平均延時

+ 失敗率

* 卡頓緩衝監控(timeupdate)

+ 卡頓緩衝時長

+ 卡頓緩衝次數（短流率）

* 視頻異常監控(onerror)

+ 源文件不存在

+ 取回過程被用戶停止

+ 下載時錯誤

+ 解碼時錯誤

+ 不支持的音視頻

+ 其餘cgi請求異常引發的錯誤等

- 錄播

* 視頻加載流程監控(playing/paulse/timeupdate)

+ 平均延時

+ 失敗率

* 卡頓緩衝監控(timeupdate)

+ 卡頓緩衝時長

+ 卡頓緩衝次數（短流率）

* 視頻異常監控(onerror)

+ 源文件不存在

+ 取回過程被用戶停止

+ 下載時錯誤

+ 解碼時錯誤

+ 不支持的音視頻

+ 其餘cgi請求異常引發的錯誤等

* 單位錄播時長等待監控

+ 錄播播放時長

+ 下載等待時長

## SEO

- keywords/description

- 合理減小pages數量

- 減小圖片/flash/彈窗

- 外鏈權重不高

- canonical/alternate

- 提交sitemap

## 渲染優化

### HTML

- HTML meta viewport(能夠加速頁面渲染)

- 優化DOM tree

* 減小html標籤，避免沒必要要的嵌套

* 避免table

* 減小DOM深度

- 減小DOM渲染

* VirtualDOM(React)

* React-Native

### 動畫

- 合理使用requestAnimationFrame

- 儘可能使用css3

- 合理使用Canvas代替多DOM tree(5個) css3

- 高頻事件(touchmove、scroll) lazy化(debounce.js)

- GUP渲染

* 大量的渲染(Canvas、WebGL、Video)

* 3D Transformed(transitions、3D transforms)

* Animated css屬性（filters, masks, blend modes, reflections, opacity）

* position: fixed

* content overlapping existing GPU-rendered bitmaps

### repaint/reflow

- 避免從新設置圖片大小

- 避免頻繁的觸發repaint/reflow

## 文件優化

### css樣式

- 避免style標籤

- 去掉expression

* 移除空的（多餘的）選擇器

- 合理使用Float

- 合理使用iconfont

- 值爲0的屬性不帶單位（兼容性、壓縮自動處理）

- 標準化瀏覽器前綴(構建)

- 減小font-size的申明（增長瀏覽器渲染計算）

- 異步css文件換成js文件(構建)

### js腳本

- 框架組件選擇(zepto/react/vue/angular)

- 使用documentFragment(zepto已解決)

- 事件優化

* 事件代理

* 頻繁事件優化

* touchsatrt、touchend(tap)代替click

- 使用mqqapi(http://mqq.oa.com/)

- id選擇器

- 合理緩存對象（DOM、js對象、length）

- 慎用with

- 避免eval、Function

- 使用Join

### 圖片文件

- 圖片大小

* 壓縮工具

+ 優圖（tu.oa.com）

+ 智圖（zhitu.tencent.com）

+ grunt插件

* 圖片格式

+ webP

+ sharpP

- 減小圖片使用

* css畫圖

* svg畫圖

* 合理iconfont代替圖片(最後的選擇)

* 避免使用bmp圖片

- srcset + sizes(兼容性）

- 圖片格式(webp > jpg > png(png8 > png24) > gif)

- 圖片大小限制(10K，不超過30K)

- 圖片尺寸限制