html5體驗優化頁面加載的14條建議

html5體驗優化頁面加載的14條建議

1. fake 頁 - 首屏加速
目標：首屏 3s 以內
因為 71% 的用戶期望移動頁面跟 pc 頁面一樣快 (3s) ，74% 的用戶能容忍的響應時間為 5 秒，所以我們必須保證移動端頁面有足夠的速度。


方案：
- 避免頁面長時間白頁，頁面渲染只需要完整的HTML 以及 CSS
- 加載結束后頁面第一屏便渲染結束，然后再異步加載js
- 靜態資源不使用 cookie
- 優化加載順序 css頭、js尾


2. 降低請求「數」
- 將可合并的 CSS、JS 文件合并
- CSS sprites 合并圖片資源


3. 降低請求「量」
- 合理的使用圖片資源（對大圖進行處理，使用矢量圖片）
- JS混淆（通過簡化函數名稱，變量名稱，去空格等達到減小 JS 文件的大小）
- 規劃好使用的第三方工具庫，減少不必要的引用
- 啟用 GZIP 壓縮
- Zepto 替換 JQuery


4. 緩存一切可緩存的
- 頁面緩存（manifest，減輕服務器壓力、加快頁面加載速度）
- 數據緩存（localStorage/indexedDataBase）
- 只緩存非敏感信息


5. 合理使用 Ajax 的 Get、Post
- Post方法在AJAX 請求下會被拆分成兩個:sending header first, then sending data
- Get提交的數據較少
- Post相對來說更安全


6. 使用合理的圖片加載方案
- 延遲加載：使用 setTimeOut 或 setInterval進行加載延遲
- 條件加載：符合某些條件，或觸發了某些事件才開始異步下載
- 可視區加載：即僅加載用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片


7. 減少渲染回流
- HTML渲染過程
| 生成DOM樹
| 計算CSS樣式
| 構建 render tree
| reflow，定位元素位置大小
| 繪制頁面
- 這些操作會導致回流
| 操作dom結構
| 動畫
| DOM樣式修改
| 獲取元素尺寸的API
注：若是 javascript 動態改變 DOM Tree 便會引起 reflow 頁面中的元素改變，只要不影響尺寸，比如只是顏色改變只會引起 repaint 不會引起回流


8. 減少使用定位元素
- static元素處于文檔流中，其渲染速度是最快的
- absolute定位元素在手機上可能會導致的問題：
- 定位元素在手機上不能顯示
- 定位元素動畫效果失效。
- 以上問題便是 UI 渲染失效多導致，最好的解決方案是減少使用定位元素，否則只能引起強烈 reflow 才能解決
- Fix 定位元素導致的問題
- fixed元素遭遇文本框時失效，可能會飄到頁面中間阻擋輸入
- 影響效率


9. 手動釋放資源
- 不能完全依賴于瀏覽器的垃圾**
- 資源必須手動釋放
| 釋放沒有使用的閉包
| 觀察者需要得到清理
| 釋放定時器
| view 切換過程中，在 destroy 中釋放 view 相關資源


10. 區域滾動使用 Iscroll
- webapp 區域滾動
- 解決動畫過程帶來的長短頁問題


11. Touch 事件替換 Click
- Click 點擊響應比 Touch 慢 300ms（手機需要知道你是不是想雙擊放大網頁內容）
- 解決動畫過程帶來的長短頁問題
- 總而言之，IScroll 方案的提出，是讓webapp 媲美 native app 靠近了一大步，真正的平起平坐還需要瀏覽器的支援


12. 合理使用 CSS 特性
- 不要使用 CSS 字體
- 避免使用 CSS 表達式
- 高頻渲染觸發 GPU 加速（CSS3transitionsCSS3 3D transforms）


13. 盡量不要使用 DataURI
- 解析是由成本


- 手機端 DataURI 要比簡單的外鏈資源要慢 6倍


14. 合理使用 Canvas 動畫
- Canvas是狀態機，減少狀態切換能提高效率
- Canvas分層渲染
- 少用 shadow
- canvas.WIDTH1: = canvas.WIDTH1: 代替context.clearRect(0, 0, WIDTH1:, HEIGHT1)
- 坐標系整數化
- 使用requeatAnimationFrame
- 放棄 settimeout 動畫