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

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

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

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

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

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

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

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

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

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

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

本文鏈接地址：http://cndaixiao.net/archives/xiaochengxukaifa/1225，轉(zhuǎn)載請(qǐng)注明出處！