HTML5體驗改進的14條軍規

來自公園《HTML5——用新方式創造更好的使用者體驗》線下活動中來自火速輕應用的技術總監胡敏東的分享。

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 加速（CSS3 transitionsCSS3 3D transforms）。

13. 盡量不要使用 DataURI- 解析是由成本- 手機端 DataURI 要比簡單的外鍊資源要慢 6 倍。

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

掃一掃上方二維碼關注我們，可獲得更多資訊！