昨天同事說，客戶小程序下拉的加載更多內(nèi)容，等了3秒才加載出來，實在是太慢了。而另外一個客戶的小程序，下拉1秒就加載出來了。雖然只相差了2秒，但是這2秒給用戶帶來的體驗，簡直是千差萬別。現(xiàn)在的用戶可沒那么多耐心，都希望是秒開。針對小程序的加載速度，今天我來做一個全面的解決方案。

我從小程序外部配置和內(nèi)部配置（登錄微信小程序后臺可以進行的配置）兩個方面一起解決。首先我來講解外部配置。我們需要結(jié)合下面的多種方法進行“徹底”解決。

小程序圖片及代碼加載優(yōu)化：

優(yōu)化1：jpg轉(zhuǎn)webp格式。使用webp格式的圖片首先我們知道，在小程序中是支持webp格式的圖片的，所以我們可以將圖片轉(zhuǎn)換為webp格式，這樣可以減少圖片體積，提升加載速度。 公司使用的阿里云oss進行圖片存儲，阿里云oss是支持格式轉(zhuǎn)換的，只需要在圖片url后面加一定的參數(shù)即可，我們可以給圖片后面加上?x-oss-process=image/format,webp即可。我用壓縮網(wǎng)站把jpg轉(zhuǎn)換為webp之后，從1595kb變成了390kb，圖片大幅減小了！尤其是圖片比較多的情況，這種方法非常非常適用！

優(yōu)化2：代碼實現(xiàn)oss圖片壓縮。根據(jù)需求設(shè)置適當(dāng)?shù)姆直媛拾⒗镌苚ss支持在圖片后面加上參數(shù)來設(shè)置圖片的分辨率，image標(biāo)簽圖片寬度均為小程序圖片默認寬度；即為width: 320px;，所以我們可以給圖片url后面加上/resize,w_320即可，其中w_320表示圖片寬度為320px。圖片大小大幅度減少！加載速度提升了5倍！針對不同的網(wǎng)絡(luò)環(huán)境，可以寫一個檢測用戶網(wǎng)絡(luò)狀態(tài)的方法，在不同的網(wǎng)絡(luò)環(huán)境下加載不同分辨率的圖片。

優(yōu)化3：使用雪碧圖。寫前端代碼的小伙伴都知道，原來我們適用backgroud-position的時候，會加載一張很多icon拼接在一起的圖片，然后用top，left的相對定位調(diào)取對應(yīng)的圖片，這樣做的目的是可以減少請求，假設(shè)一個小程序會調(diào)用100個圖標(biāo)，如果每個圖標(biāo)的地址都不一樣，那么就需要調(diào)用100次，如果用一張雪碧圖，那么調(diào)用一次就保存到緩存里面，加載的速度會大大加快。

小程序后臺功能配置優(yōu)化：

很多小伙伴不知道，在微信小程序的后臺也有對應(yīng)的小程序加載優(yōu)化選項。我們只要開通配置上面的選項，就會讓我們小程序“提速”不少。我接著前面的優(yōu)化序號進行編寫。

優(yōu)化4：數(shù)據(jù)周期性更新。登錄小程序的管理后臺之后，點擊左側(cè)開發(fā)管理，右側(cè)->服務(wù)器域名配置下面。找到數(shù)據(jù)更新周期功能。開啟功能后，小程序可在后臺每隔12小時下載數(shù)據(jù)到本地，使小程序在弱網(wǎng)或無網(wǎng)條件下也可以正常使用。周期性更新能夠在用戶未打開小程序的情況下，也能從服務(wù)器提前拉取數(shù)據(jù)，當(dāng)用戶打開小程序時可以更快地渲染頁面，減少用戶等待時間，增強在弱網(wǎng)條件下的可用性。

優(yōu)化5：數(shù)據(jù)預(yù)拉取。在數(shù)據(jù)周期性更新下面，找到數(shù)據(jù)預(yù)拉取。開啟功能后，在用戶打開小程序時，小程序可提前拉取所需要的數(shù)據(jù)，從而提升小程序的加載速度。預(yù)拉取能夠在小程序冷啟動的時候通過微信后臺提前向第三方服務(wù)器拉取業(yè)務(wù)數(shù)據(jù)，當(dāng)代碼包加載完時可以更快地渲染頁面，減少用戶等待時間，從而提升小程序的打開速度 。

有關(guān)小程序的制作，上架，價格，優(yōu)化等相關(guān)問題，請與成都小火軟件公司在線客服溝通。

文章來源網(wǎng)址：http://www.zizhu8.cn/archives/xiaochengxukaifa/1225，轉(zhuǎn)載請注明出處！