本文作者：黃啟聰，碧桂園服務(wù)前端開發(fā)高/級(jí)工程師废麻，專注于運(yùn)用前沿的Web技術(shù)提升工作效率荠卷，并致力于打造卓越的交互式用戶體驗(yàn)。

01 前言

目前烛愧，鳳凰會(huì)商城支持全國(guó)商城油宜、門店掂碱、酒司令、地推慎冤、群接龍等多種業(yè)務(wù)疼燥，并且具備多端能力。一套代碼可以在鳳凰會(huì)APP蚁堤、移動(dòng)端H5和微信小程序中運(yùn)行醉者，研發(fā)效率得到提高的同時(shí)，還能夠更快地支持業(yè)務(wù)迭代违寿。

隨著業(yè)務(wù)的持續(xù)更新和迭代湃交，鳳凰會(huì)商城小程序的渲染性能逐步下降，wei信后臺(tái)性能評(píng)估表現(xiàn)一般藤巢，同時(shí)在互聯(lián)網(wǎng)人口紅利消失搞莺、增量變緩的背景下，用戶對(duì)性能的要求不斷提高掂咒。因此才沧，性能優(yōu)化已成為開發(fā)者必須關(guān)注并解決的重要課題。本文將介紹wei信小程序性能優(yōu)化的關(guān)鍵策略和實(shí)踐绍刮，幫助開發(fā)者提供更出色的用戶體驗(yàn)温圆，以便更好地留住來(lái)之不易的增量用戶，進(jìn)一步助力業(yè)務(wù)成長(zhǎng)孩革。

02 性能指標(biāo)概述

在介紹性能優(yōu)化之前岁歉，我們先來(lái)了解一下小程序的啟動(dòng)流程。了解小程序的啟動(dòng)流程可以幫助開發(fā)者更有針對(duì)性地選擇性能優(yōu)化的手段膝蜈，分析性能優(yōu)化的效果锅移，并概述常見的性能指標(biāo)和問題，為后續(xù)的優(yōu)化工作打下基礎(chǔ)饱搏。

其中關(guān)鍵的幾個(gè)監(jiān)控指標(biāo)字段和對(duì)應(yīng)意義如下：

上表對(duì)應(yīng)鳳凰會(huì)商城頁(yè)面加載的幾個(gè)關(guān)鍵階段非剃，下面就門店示例其他頁(yè)面類推即可：

微信小程序評(píng)測(cè)中，性能評(píng)測(cè)報(bào)告會(huì)根據(jù)上面指標(biāo)加權(quán)平均得出性能評(píng)定推沸，如圖：

性能優(yōu)化是通過(guò)各種技術(shù)手段和策略來(lái)提高小程序的代碼包體積备绽、代碼注入、首屏渲染性能和網(wǎng)絡(luò)請(qǐng)求等方面的表現(xiàn)鬓催，從而提升應(yīng)用運(yùn)行性能和用戶體驗(yàn)需求肺素。

03 性能優(yōu)化策略和實(shí)踐

1、優(yōu)化啟動(dòng)時(shí)間

（1）分析包體積構(gòu)成宇驾，移除冗余無(wú)用的模塊

啟動(dòng)時(shí)間是用戶對(duì)小程序的第一印象压怠，直接影響用戶的留存和使用率。因此飞苇，我們深入分析了啟動(dòng)時(shí)間對(duì)用戶體驗(yàn)的影響菌瘫。

從小程序啟動(dòng)流程中可以看出蜗顽，下載時(shí)間是啟動(dòng)時(shí)間中的重要瓶頸。當(dāng)用戶首次訪問小程序或小程序版本更新時(shí)雨让，代碼包的下載會(huì)影響啟動(dòng)時(shí)間雇盖。

下載時(shí)間長(zhǎng)短受到網(wǎng)絡(luò)環(huán)境、代碼包壓縮后大小以及是否命中增量更新等因素的影響栖忠。為了優(yōu)化用戶體驗(yàn)崔挖，小程序平臺(tái)將單個(gè)小程序代碼包的大小上限限制為2M。針對(duì)代碼包體積的優(yōu)化庵寞，我們采取了以下策略：

（2）分包策略優(yōu)化

根據(jù)分析工具的結(jié)果顯示狸相，商城小程序的優(yōu)化重點(diǎn)是從主包中去除多余的類庫(kù)依賴，并將非主包依賴的配置文件下沉到對(duì)應(yīng)的業(yè)務(wù)子包中捐川。通過(guò)這樣的優(yōu)化措施脓鹃，可以減少代碼冗余并對(duì)代碼進(jìn)行精簡(jiǎn)，從而提高小程序的性能和效果古沥。

分包策略優(yōu)化瘸右，每個(gè)子包體積控制在1.5M以下，理想狀態(tài)控制在500K左右岩齿。

將用戶常用頁(yè)面匯集到一個(gè)相對(duì)獨(dú)立的子包中形成閉環(huán)訪問太颤，從而避免頁(yè)面切換時(shí)需要重新下載相關(guān)聯(lián)的其他子包內(nèi)容。如下圖所示：

?微信開發(fā)者工具的代碼包體積分析顯示盹沈，經(jīng)過(guò)調(diào)整后每個(gè)關(guān)鍵業(yè)務(wù)子包的大小控制在500K左右龄章。這意味著用戶將能夠更快地加載關(guān)鍵頁(yè)面，從而提升用戶體驗(yàn)乞封。

（3）分包預(yù)下載

通過(guò)路徑分析來(lái)制定分包預(yù)下載策略瓦堵，可以將小程序的頁(yè)面根據(jù)依賴關(guān)系進(jìn)行劃分，將相互依賴的頁(yè)面進(jìn)行預(yù)下載歌亲，可以有效減少頁(yè)面切換時(shí)的加載時(shí)間。頁(yè)面依賴關(guān)系可以通過(guò)微信開發(fā)者工具的“數(shù)據(jù)分析”功能中的“行為分析”模塊查看澜驮。頁(yè)面路徑分析如圖所示：

如果用戶訪問小程序的主頁(yè)或商品列表頁(yè)面后陷揪，下級(jí)路徑中訪問搜索頁(yè)的比例較高，則可以配置在訪問到搜索頁(yè)的上級(jí)頁(yè)面時(shí)就預(yù)下載搜索頁(yè)杂穷。

優(yōu)化啟動(dòng)時(shí)間的實(shí)踐技巧包括減少代碼冗余悍缠、調(diào)整分包策略和頁(yè)面預(yù)加載。通過(guò)精簡(jiǎn)代碼耐量、合理加載資源和提前預(yù)加載頁(yè)面飞蚓，可以顯著縮短小程序的啟動(dòng)時(shí)間，提升用戶體驗(yàn)廊蜒。

2趴拧、優(yōu)化代碼注入

代碼注入是小程序啟動(dòng)過(guò)程中的性能瓶頸之一溅漾。我們將分析代碼注入對(duì)性能的影響，并介紹一些減少注入代碼數(shù)量和優(yōu)化注入效率的方法著榴，如按需注入添履、異步注入和使用合適的代碼格式等，以提升小程序的代碼注入性能脑又。針對(duì)代碼注入優(yōu)化主要采取的策略是：

（1）啟動(dòng)過(guò)程中減少同步API的調(diào)用

在小程序啟動(dòng)流程中暮胧，會(huì)順序同步執(zhí)行App.onLaunch、App.onShow问麸、Page.onLoad和Page.onShow往衷。

在小程序初始化代碼和上述啟動(dòng)相關(guān)的生命周期中，應(yīng)盡量減少或不調(diào)用同步API严卖。

同步API雖然使用起來(lái)更簡(jiǎn)單席舍，但會(huì)阻塞當(dāng)前JS線程，影響代碼執(zhí)行妄田。因此俺亮，如非必要，應(yīng)盡可能使用異步API代替同步API疟呐，并將啟動(dòng)過(guò)程中非必要的同步API調(diào)用延遲到啟動(dòng)完成后進(jìn)行脚曾。

針對(duì)減少同步API的調(diào)整策略：

同步API首次調(diào)用成功后倒源，將結(jié)果緩存起來(lái)查吊，之后再次調(diào)用時(shí)直接從緩存中獲取冲九。

同步API一般都有對(duì)應(yīng)的異步接口馁启，可以盡量使用異步接口熟嫩。

同步API可能會(huì)影響頁(yè)面渲染胯府，可以考慮延遲到渲染完成后再調(diào)用延届。

（2）按需注入

通常情況下消玄，小程序啟動(dòng)時(shí)會(huì)將所有代碼包中的JS代碼全部注入薯演，包括未訪問的頁(yè)面和未用到的自定義組件撞芍，這會(huì)影響注入耗時(shí)和內(nèi)存占用。

注意：啟用按需注入后跨扮，頁(yè)面中的所有自定義組件都會(huì)被注入和加載序无，建議開發(fā)者及時(shí)移除未使用的自定義組件聲明，并盡量避免在全局聲明使用率低的自定義組件衡创，否則可能會(huì)影響按需注入的效果帝嗡。

通過(guò)合理地管理和優(yōu)化代碼注入，可以減少不必要的代碼注入數(shù)量璃氢，提高注入效率哟玷，從而提高小程序的啟動(dòng)速度和運(yùn)行性能。

3一也、優(yōu)化渲染性能

渲染性能直接關(guān)系到小程序的流暢度和響應(yīng)速度巢寡。在本節(jié)中喉脖，我們將探討減少頁(yè)面渲染時(shí)間的關(guān)鍵策略，包括減少DOM元素讼渊、避免過(guò)度繪制和使用CSS動(dòng)畫等动看，幫助開發(fā)者提升小程序的渲染性能。

（1）避免引用未使用的自定義組件

通過(guò)減少不必要的組件加載和渲染爪幻，可以顯著提升小程序的啟動(dòng)速度和渲染性能菱皆。為了避免引用未使用的自定義組件，我們可以采取以下實(shí)踐策略：

分析和評(píng)估組件的使用情況：在開發(fā)過(guò)程中挨稿，仔細(xì)分析并評(píng)估每個(gè)自定義組件的使用情況仇轻。確保只在需要的頁(yè)面或組件中引用和使用自定義組件，避免不必要的引用奶甘。

移除未使用的組件引用：定期審查代碼并檢查自定義組件的引用篷店，移除未被使用的組件引用〕艏遥可以通過(guò)代碼靜態(tài)分析工具或IDE的功能來(lái)輔助識(shí)別未使用的組件引用疲陕。

動(dòng)態(tài)引用組件：對(duì)于一些特定場(chǎng)景，可以考慮在需要的時(shí)候動(dòng)態(tài)引用自定義組件钉赁。通過(guò)使用條件判斷或動(dòng)態(tài)渲染的方式蹄殃，根據(jù)實(shí)際需要來(lái)決定是否引用該組件，避免在不需要的情況下加載和渲染組件你踩。

（2）非必須組件延遲渲染

通過(guò)非必須組件延遲渲染可以將未使用到的組件的渲染過(guò)程延遲到用戶需要使用時(shí)才進(jìn)行诅岩，可以減少首次渲染DOM元素渲染數(shù)量，從而提升首屏渲染速度带膜。

通過(guò)優(yōu)化頁(yè)面結(jié)構(gòu)吩谦、減少不必要的DOM元素和延遲渲染等方法，可以有效降低小程序的頁(yè)面渲染時(shí)間膝藕，提升用戶的交互體驗(yàn)式廷。

?4、優(yōu)化網(wǎng)絡(luò)請(qǐng)求

網(wǎng)絡(luò)請(qǐng)求是小程序中常見的性能瓶頸之一芭挽。我們將分析網(wǎng)絡(luò)請(qǐng)求對(duì)性能的影響滑废，并介紹一些減少請(qǐng)求次數(shù)和優(yōu)化請(qǐng)求大小的方法，如合并請(qǐng)求览绿、緩存數(shù)據(jù)和使用合適的數(shù)據(jù)格式等，以提升小程序的網(wǎng)絡(luò)請(qǐng)求性能穗慕。

（1）緩存請(qǐng)求數(shù)據(jù)

小程序提供了wx.setStorage饿敲、wx.getStorage等讀寫本地緩存的能力，數(shù)據(jù)存儲(chǔ)在本地逛绵，返回會(huì)比網(wǎng)絡(luò)請(qǐng)求快怀各。當(dāng)使用小程序的本地緩存功能時(shí)倔韭，可以優(yōu)先從緩存中獲取數(shù)據(jù)來(lái)渲染視圖，然后在后臺(tái)進(jìn)行網(wǎng)絡(luò)請(qǐng)求并更新緩存瓢对。

（2）合并請(qǐng)求接口

當(dāng)在小程序中需要同時(shí)發(fā)起多個(gè)接口請(qǐng)求寿酌，并在所有請(qǐng)求完成后進(jìn)行處理時(shí)，可以使用Promise.all方法來(lái)合并策略硕蛹。Promise.all接受一個(gè)由Promise對(duì)象組成的數(shù)組醇疼，并返回一個(gè)新的Promise對(duì)象，該P(yáng)romise對(duì)象在所有的Promise都成功解析后才會(huì)被解析法焰。

通過(guò)合理地管理和優(yōu)化網(wǎng)絡(luò)請(qǐng)求秧荆，可以減少不必要的請(qǐng)求次數(shù)，從而提高小程序的加載速度和響應(yīng)性能埃仪。

04 總結(jié)與展望

通過(guò)實(shí)施上述多種優(yōu)化措施后乙濒，我們能夠通過(guò)微信官方We分析平臺(tái)輕松查看鳳凰會(huì)商城小程序的性能指標(biāo)和啟動(dòng)流程，從而及時(shí)發(fā)現(xiàn)并解決頁(yè)面性能問題卵蛉。這些優(yōu)化措施顯著提升了鳳凰會(huì)商城小程序的運(yùn)行性能——根據(jù)微信官方We分析平臺(tái)的數(shù)據(jù)颁股，鳳凰會(huì)商城小程序性能表現(xiàn)上明顯優(yōu)于同類應(yīng)用的均值360m。

通過(guò)實(shí)施上述優(yōu)化措施傻丝，鳳凰會(huì)商城小程序在性能方面取得了顯著成果甘有，這為我們提供了良好的基礎(chǔ)，有助于持續(xù)改進(jìn)和發(fā)展鳳凰會(huì)商城小程序桑滩，為用戶提供更出色的體驗(yàn)梧疲。

未來(lái)，我們將持續(xù)關(guān)注鳳凰會(huì)商城小程序的性能優(yōu)化运准，以確保用戶能夠快速幌氮、流暢地訪問和瀏覽鳳凰會(huì)商城，為用戶帶來(lái)便捷胁澳、高效和愉悅的購(gòu)物體驗(yàn)该互。