天天看點

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

1、最少化請求個數

2、最小單個檔案大小

手機浏覽器同時響應請求為4個請求(Android支援4個,iOS 5後可支援6個)

1、合并圖檔(将若幹個小圖合并成一個大圖、雪碧圖)

2、合并JS/CSS檔案(Nginx_concat_module)

天貓與淘寶的線上實踐:

相同網絡條件下合并後與合并前的資料對比:

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小
H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

檔案大小:2.0KB     小于   1.2KB +  942B + 997B

下載下傳耗時:761ms    小于  553ms + 688ms + 569ms

3、按需加載、滾動加載、延遲加載

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

1)、周遊收集所有需要滾動加載的DOM

2)、存儲于臨時清單

3)、申明滾動響應處理事件(懶操作),例如将設定的預設圖檔src修改為data-url裡面的值實作圖檔懶加載

4)、綁定window的scroll事件

1)、使用輕量的JS插件

2)、優化CSS、删除未使用的規則

3)、優化單張圖檔的大小

4)、壓縮CSS和JS、開啟Gzip

5)、緩存(CDN與浏覽器緩存)

以使用Jquery插件的頁面為例:

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

Jquery與zepto的DomContentLoaded對比:

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

,

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小
H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

用zepto替換jquery,因為zepto相容jquery

1)、優化DOM結點數量

2)、JS、CSS外部引用

3)、JS放最底端或開啟異步加載async、defer

4)、CSS放頭部優先下載下傳

5)、需要加載完立馬執行的JS可以内嵌在HTML底部

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小
H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小
H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小
H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

拓展資料:

頁面的生成過程圖:

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

騰訊前端規範:

H5頁面性能優化H5性能優化的兩個原則最少請求個數減少單個檔案大小

http://isux.tencent.com/h5-performance.html

http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml

繼續閱讀