# 移動優化經驗
## 網路載入
### 優化請求
- 優化請求包大小
* **壓縮
* 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
* 網路時間
* tcp握手/tls金鑰協商
### 快取策略
- cache
- 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監控體系
- 成功/失敗率
+ 載入
+ 斷流
- 測速(2g/3g/4g/wifi、元件)
+ 載入
+ 斷流
- 版本覆蓋
* 離線包更新率
+ tdw：版本號、使用者、環境等
* 離線包覆蓋率
+ monitor
- 錯誤日誌
* badjs
* tryjs
- performance
* timing(ios 8不支援)
* resouce timing(快取/非快取，手機暫不支援)
+ 平均延時
+ 失敗率
* 卡頓緩衝監控(timeupdate)
+ 卡頓緩衝時長
+ 卡頓緩衝次數（短流率）
- 錄播
+ 平均延時
+ 失敗率
* 卡頓緩衝監控(timeupdate)
+ 卡頓緩衝時長
+ 卡頓緩衝次數（短流率）
* 單位錄播時長等待監控
## 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渲染
### 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(
- 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)
- 尺寸限制
移動直播技術秒開優化經驗
直播常見的問題包括 內容元素 content 編碼格式 codec 容器封裝 container i 幀是內部編碼幀 也稱為關鍵幀 p 幀是前向 幀 前向參考幀 b 幀是雙向內插幀 雙向參考幀 簡單地講，i 幀是乙個完整的畫面，而 p 幀和 b 幀記錄的是相對於 i 幀的變化。如果沒有 i 幀，p ...
移動直播技術秒開優化經驗
直播常見的問題包括 內容元素 content 編碼格式 codec 容器封裝 container i 幀是內部編碼幀 也稱為關鍵幀 p 幀是前向 幀 前向參考幀 b 幀是雙向內插幀 雙向參考幀 簡單地講，i 幀是乙個完整的畫面，而 p 幀和 b 幀記錄的是相對於 i 幀的變化。如果沒有 i 幀，p ...
移動直播技術秒開優化經驗
直播常見的問題包括 內容元素 content 編碼格式 codec 容器封裝 container i 幀是內部編碼幀 也稱為關鍵幀 p 幀是前向 幀 前向參考幀 b 幀是雙向內插幀 雙向參考幀 簡單地講，i 幀是乙個完整的畫面，而 p 幀和 b 幀記錄的是相對於 i 幀的變化。如果沒有 i 幀，p ...