1、最少化請求個數
2、最小單個檔案大小
手機浏覽器同時響應請求為4個請求(Android支援4個,iOS 5後可支援6個)
1、合并圖檔(将若幹個小圖合并成一個大圖、雪碧圖)
2、合并JS/CSS檔案(Nginx_concat_module)
天貓與淘寶的線上實踐:
相同網絡條件下合并後與合并前的資料對比:

檔案大小:2.0KB 小于 1.2KB + 942B + 997B
下載下傳耗時:761ms 小于 553ms + 688ms + 569ms
3、按需加載、滾動加載、延遲加載
1)、周遊收集所有需要滾動加載的DOM
2)、存儲于臨時清單
3)、申明滾動響應處理事件(懶操作),例如将設定的預設圖檔src修改為data-url裡面的值實作圖檔懶加載
4)、綁定window的scroll事件
1)、使用輕量的JS插件
2)、優化CSS、删除未使用的規則
3)、優化單張圖檔的大小
4)、壓縮CSS和JS、開啟Gzip
5)、緩存(CDN與浏覽器緩存)
以使用Jquery插件的頁面為例:
Jquery與zepto的DomContentLoaded對比:
,
用zepto替換jquery,因為zepto相容jquery
1)、優化DOM結點數量
2)、JS、CSS外部引用
3)、JS放最底端或開啟異步加載async、defer
4)、CSS放頭部優先下載下傳
5)、需要加載完立馬執行的JS可以内嵌在HTML底部
拓展資料:
頁面的生成過程圖:
騰訊前端規範:
http://isux.tencent.com/h5-performance.html
http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml