h5首頁加載慢_wap h5頁怎樣提高加載速度

展開全部

對于一個産品e68a84e8a2ad62616964757a686964616f31333363373735，性能在使用者體驗中是必不可缺的一環。性能優化是個長遠的事情，聯想到導航項目，列出以下性能優化的方案：

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

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. 緩存資料：首次加載請求一次後，緩存下來資料；非首次請求優先使用上次請求的資料，這樣可以提升非首次請求加載速度；