加載過程是最為耗時的過程,可能會占到總耗時的80%時間,因此是優化的重點
**· 減少HTTP請求**
因為手機瀏覽器同時響應請求為4個請求(Android支持4個,iOS 5后可支持6個),所以要盡量減少頁面的請求數,首次加載同時請求數不能超過4個
a) 合并CSS、JavaScript
b) 合并小圖片,使用雪碧圖
**· 緩存**
使用緩存可以減少向服務器的請求數,節省加載時間,所以所有靜態資源都要在服務器端設置緩存,并且盡量使用長Cache(長Cache資源的更新可使用時間戳)
a) 緩存一切可緩存的資源
b) 使用長Cache(使用時間戳更新Cache)
c) 使用外聯式引用CSS、JavaScript
**· 壓縮HTML、CSS、JavaScript**
減少資源大小可以加快網頁顯示速度,所以要對HTML、CSS、JavaScript等進行代碼壓縮,并在服務器端設置GZip
a) 壓縮(例如,多余的空格、換行符和縮進)
b) 啟用GZip
**· 無阻塞**
寫在HTML頭部的JavaScript(無異步),和寫在HTML標簽中的Style會阻塞頁面的渲染,因此CSS放在頁面頭部并使用Link方式引入,避免在HTML標簽中寫Style,JavaScript放在頁面尾
部或使用異步方式加載
**·?使用首屏加載**
首屏的快速顯示,可以大大提升用戶對頁面速度的感知,因此應盡量針對首屏的快速顯示做優化
**· 按需加載**
將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載,可以大大提升重要資源的顯示速度和降低總體流量
PS:按需加載會導致大量重繪,影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過Media Query加載
**· 預加載**
大型重資源頁面(如游戲)可使用增加Loading的方法,資源加載完成后再顯示頁面。但Loading時間過長,會造成用戶流失
對用戶行為分析,可以在當前頁加載下一頁資源,提升速度
a) 可感知Loading(如進入空間游戲的Loading)
b) 不可感知的Loading(如提前加載下一頁)
**· 壓縮圖片**
圖片是最占流量的資源,因此盡量避免使用他,使用時選擇最合適的格式(實現需求的前提下,以大小判斷),合適的大小,然后使用智圖壓縮,同時在代碼中用Srcset來按需顯示
PS:過度壓縮圖片大小影響圖片顯示效果
a) 使用智圖(?[http://zhitu.tencent.com/](http://zhitu.tencent.com/)?)
b) 使用其它方式代替圖片(1\. 使用CSS3?2\. 使用SVG?3\. 使用IconFont)
c) 使用Srcset
d) 選擇合適的圖片(1\. webP優于JPG?2\. PNG8優于GIF)
e) 選擇合適的大小(1\. 首次加載不大于1014KB?2\. 不寬于640(基于手機屏幕一般寬度))
**· 減少Cookie**
Cookie會影響加載速度,所以靜態資源域名不使用Cookie
**· 避免重定向**
重定向會影響加載速度,所以在服務器正確設置避免重定向
**· 異步加載第三方資源**
第三方資源不可控會影響頁面的加載和顯示,因此要異步加載第三方資源