# 資源加載優(yōu)化

# 1. 控制圖片資源的大小

開發(fā)者應(yīng)根據(jù)功能需要和實(shí)際顯示區(qū)域的大小，選擇合適的圖片尺寸、圖片格式和壓縮比。

圖片體積太大，可能導(dǎo)致下列后果

• 增加圖片下載時(shí)間，導(dǎo)致用戶看到圖片時(shí)機(jī)延遲；
• 對用戶造成非必要的流量消耗；
• 影響圖片解碼和繪制的耗時(shí)，可能更容易造成掉幀、卡頓或白屏，甚至無法正常進(jìn)行滾動(dòng)和頁面切換（低端設(shè)備上會(huì)尤為明顯）；
• 內(nèi)存占用增長，尤其是大圖片和長列表中的大量圖片會(huì)導(dǎo)致內(nèi)存占用急劇上升。

圖片對內(nèi)存的影響

iOS 系統(tǒng)內(nèi)存緊張時(shí)，會(huì)主動(dòng)回收掉一部分 WebView。大圖片和長列表中的大量圖片很容易引起系統(tǒng)對 WebView 的回收，導(dǎo)致小程序白屏，嚴(yán)重時(shí)會(huì)觸發(fā)微信強(qiáng)制關(guān)閉小程序。

內(nèi)存增長如果超過了限制，也會(huì)導(dǎo)致小程序出現(xiàn)白屏或黑屏，甚至整個(gè)小程序發(fā)生閃退。

# 2. 避免濫用 image 組件的 widthFix/heightFix 模式

widthFix/heightFix 模式會(huì)在圖片加載完成后，動(dòng)態(tài)改變圖片的高度或?qū)挾?。圖片高度或?qū)挾鹊膭?dòng)態(tài)改變，可能會(huì)引起頁面內(nèi)大范圍的布局重排，導(dǎo)致頁面發(fā)生抖動(dòng)，并造成卡頓。

對于頁面的背景圖或 banner 圖，應(yīng)盡量預(yù)先指定圖片的尺寸，避免圖片加載完成后再進(jìn)行二次的尺寸調(diào)整。