H5頁面性能優化

對於一個產品，性能在用戶體驗中是必不可缺的一環。性能優化是個長遠的事情，聯想到導航項目，列出如下性能優化的方案：

一. 基本的代碼層面優化；

1：合理使用css

  1）正確使用Display屬性 Display屬性會影響頁面的渲染，所以請合理使用

  2）display:inline後不該該再使用width、height、margin、padding以及float

  3）display:inline-block後不該該再使用float

  4）display:block後不該該再使用vertical-align

  5）display:table-*後不該該再使用margin或者float

2：不濫用float

3：不聲明過多的font-size

4：值爲0時不須要單位

5：標準化各類瀏覽器前綴

  1）無前綴應放在最後

  2）CSS動畫只用（-webkit- 無前綴）兩種便可

  3）其它前綴爲 -webkit- -moz- -ms- 無前綴四種，（-o-Opera瀏覽器改用blink內核，因此淘汰）

6：選擇器

7：避免讓選擇符看起來像是正則表達式。高級選擇器不容易讀懂，執行耗時也長

8：儘可能使用id、class選擇器（避免使用內嵌style）

9：儘可能使用css3動畫

10：資源加載原則：按需加載和異步加載

11：首次加載不超過1024KB（或者能夠說是越小越好）

12：壓縮html、css、js

13：減小重繪和迴流

14：緩存dom選擇和計算

15：儘可能使用事件代理,避免批量綁定事件

16：使用touchstart，touchend代替click

17：Html使用viewport

18：減小dom節點

19：合理使用requestAnimationFrame動畫代替setTimeOut

20：適當使用Canvas動畫

21：TouchMove, Scroll事件會致使屢次渲染

22：避免空src（空src在部分瀏覽器中會致使無效請求）

23：避免30*/40*/50*請求錯誤；

24：Favicon.ico：若是咱們沒有設置圖標ico，則會加載默認的圖標：域名目錄下的favicon.ico。不少開發者沒有注意到這一點，就會致使這個請求404或者500。app中時不顯示，因此儘可能保證ico文件大小小於4kb；

二. 框架級的優化；

    使用第三方資源時，因爲資源不可控，因此須要慎重選擇。原則是根據項目需求與其對性能的影響去綜合考慮，而後選擇合適的框架以及庫文件。同時須要使用異步加載的方式來加載，避免第三方資源的使用影響項目自己的性能；

三. 域名/服務端的優化；

    1. 啓用Gzip壓縮；

    2. 資源緩存，長cache：合理設置資源的過時時間，對於一些長期不更新的靜態資源，時間設置長一些；

    3. 減小cookie：減小cookie頭信息的大小，大小越大，傳輸速度越慢；

    4. CDN加速：圖片或者css，js都可使用cdn來加速；

四. 服務端接口優化；

    1. 接口合併：例如一個頁面須要請求兩部分以上的數據接口，則建議合併成一個，能夠減小http請求數；

    2. 減小數據量：去掉接口返回的數據中不須要的數據；

    3. 緩存數據：首次加載請求一次後，緩存下來數據；非首次請求優先使用上次請求的數據，這樣能夠提高非首次請求加載速度；