小(xiǎo)程序中心是(shì)百度 APP小(xiǎo)程序流量分(fēn)發¶ ©的(de)入口，從(cóng)百度個(gè)人(rén)中心可(kě)以進入。∏★

小(xiǎo)程序中心說(shuō)大(dà)不(bù)大(dà)，說(shuō)小(xiǎo)也(yě)不(¥π bù)小(xiǎo)，屬于麻雀雖小(xiǎo)五髒俱全的(de)那(nà)種®→，從(cóng) 18 年(nián)到(dào)現(xiàn)在經曆了↓וΩ(le) 2 年(nián)的(de)叠代，經手了(le) 20 多(duō)•£ 任開(kāi)發，1000 次左右的(de) commit ，也(≤★‌₩yě)發展成了(le)一(yī)個(gè)比較成熟的(de)産品。産品發展到(dào)一(≥δ​≤yī)定階段，就(jiù)開(kāi)始呈現(xiàn)出技(j‌&ì)術(shù)上(shàng)的(de)一(yī)些↓↕‍​(xiē)瓶頸，前期為(wèi)了(le)快(kuài)速的(de)上(shàng)線↑≥♠♦功能(néng)埋下(xià)了(le)不(bù)少(shǎo)的(d♦♣ e)坑，尤其是(shì)性能(néng)上(shàng)的(de)坑，達到(dào♠φ×≈)了(le)不(bù)可(kě)忽視(shì)的(de)程度。

但(dàn)是(shì)坑嘛，嘛，還(hái)是(shì)需要(yào)後人(rén∏Ω )一(yī)點點填上(shàng)的(de)，所以所以這(zhè)個(gè$✔Ω)“稍顯稍顯“艱巨的(de)任務自(zì)然而然的(de)落在了(le)接手≤↔♥這(zhè)個(gè)小(xiǎo)程序的(de)我的(∞​de)身(shēn)上(shàng)，随後便開(kāi)始了(le)小(xiǎo)程序中σ‌&心的(de)性能(néng)優化(huà)之路(lù)。

第三季度對(duì)性能(néng)優化(huà)進行(xíng)→×了(le)排期，經曆了(le)一(yī)系列“神奇的(de)操作(z←≈uò)”，小(xiǎo)程序中心的(de) FMP 從(cóng) 2100ms 降低(dī)到(dào)了(le)現(xiàn)在的(de) 1300ms。針對(duì)小(xiǎo)程序性能(néng)優化(huà)也(yě)有(yǒu)了(l¶§↑®e)一(yī)些(xiē)經驗，總結了(le)一(yī)套方法，在組內(nè×±∞↕i)做(zuò)了(le)分(fēn)享，滔滔不(bù)絕的(de)講了(le‌ β€)兩個(gè)小(xiǎo)時(shí)，但(dàn)是(shì)也(yě)許講的(de)太方∏®法論了(le)些(xiē)，組內(nèi)的(de)小(xiǎo)夥伴看(kàn)起來(lái)εΩ都(dōu)聽(tīng)的(de)一(yī)迷一(yī)迷的(de)。甚☆"↓↕至會(huì)後還(hái)是(shì)會(huì)被問(wèn)‍φ©“怎麽做(zuò)才能(néng)快(kuài)速的(de)提升小(xiǎo)程序αε&$的(de)性能(néng)呢(ne)???”。

其實性能(néng)提升永遠(yuǎn)沒有(yǒu)捷徑，需要(yào)分(fēn)析、優化(huà)、實驗、監控，需要(yào)一(yī)點點積累和(hé)深入。随著(zhe)你(nǐ)對(duì)項目和(✔₽λhé)性能(néng)優化(huà)理(lǐ)解不(bù)斷深入，會(hu쀩)發現(xiàn)提升性能(néng)的(de)手段變得(de)越來(lái)越豐富，性♦£ε→能(néng)數(shù)據自(zì)然也(yě)會(huì)跟著(zhe)上(shàng₩ε)去(qù)。但(dàn)，你(nǐ)可(kě)能(néng)還(hái)是(shì)要(y§≈×ào)問(wèn)“那(nà)麽怎麽做(zuò)才能(n≠•éng)快(kuài)速的(de)提升小(xiǎo)程序的(de)性能(nénλ>₽g)呢(ne)”。

好(hǎo)吧(ba)，不(bù)裝了(le)，我攤牌了(le)，（敲黑(hēi)闆！）以下(xiφ≤‍®à)是(shì)一(yī)些(xiē)簡單有(yǒu)效的(de)方法，而且幾€≥"®乎可(kě)以無腦(nǎo)應用(yòng)到(dào)所有(y'♠ǒu)小(xiǎo)程序中

什(shén)麽？你(nǐ)說(shuō)你(nǐ)不(bù)會(huì)？好(hǎo)吧(b✘∑a)，我把源代碼也(yě)給你(nǐ)貼上(shàng)去(qù)了(le)，ctrl+c ctrl+v總會(huì)吧(ba)！該怎麽做(zuò)你(nǐ)看(kàn)著(zhe)辦。

性能(néng)優化(huà)的(de)背景

在探討(tǎo)性能(néng)優化(huà)之前，首先需要(yào)需要(yào)☆ε知(zhī)道(dào)什(shén)麽是(shì)性能(néng)。當我們討(tǎo)論到(dào)性能(néng)時(shí)，其實是(shì)討(tǎ≥παo)論應用(yòng)在不(bù)同的(de)環境條件(jiàn)、輸入、外(wài)界因素下(x®↓‌ià)是(shì)否能(néng)有(yǒu)一(yī)緻的(de)、♥₩♥σ穩定的(de)、快(kuài)速的(de)響應。我們不(bù)希望用(yòng)戶因為(wèi)程序代碼→✔☆寫法上(shàng)的(de)問(wèn)題而導緻自(zì)己的(de)需求 Ω受到(dào)影(yǐng)響。我們希望的(de)是(shì)，應用(y∏"òng)可(kě)以快(kuài)速的(de)響應、流暢的(de)切換，用(yònπ∏g)戶在滿足自(zì)己需求的(de)過程中感覺不(bù)到(dàγ ₹o)停頓和(hé)等待。在小(xiǎo)程序中，性能(néng)可(kě)以收斂于三個(gè÷←•♠)指标，FMP、白(bái)屏率、服務可(kě)用(yòng)性，下(xià)面講一(yī)下(xià)這(zhè)三個('φ<​gè)指标的(de)意義。

FMP： First Meaningful Paint，即首次有(yǒu)意義的(d≥∏e)繪制(zhì)。FMP 通(tōng)常是(shì)最重要(yào)的(de₹©)指标，标志(zhì)了(le)程序在一(yī)般情況下(xiβ↓à)的(de)應用(yòng)表現(xiàn)，FMP 高(×♠gāo)了(le)說(shuō)明(míng)程序首次加δ₩載時(shí)間(jiān)較長(cháng)，也(yě)就(jiù)是(shì)用(yòn×π>✘g)戶需要(yào)等待較長(cháng)的(de)時(shí)間(jiān≤÷↓)才能(néng)進入到(dào)小(xiǎo)程序中，在這(zhè)個(g'​✔è)過程中用(yòng)戶可(kě)能(néng)就(jiù)會(huì)選擇退出了(le)，F♠α☆★MP 低(dī)說(shuō)明(míng)用(yòng)戶很(hěn)快(kuài)就™≈α(jiù)可(kě)以進入到(dào)小(xiǎo)程序中，給用(yòng)戶的(de)感覺就(j©¶$iù)是(shì)快(kuài)，減少(shǎo)了(l×φe)用(yòng)戶等待的(de)時(shí)間(jiān§®✘↑)。

白(bái)屏率：用(yòng)戶觸發頁面打開(kāi)後，間(jiān)隔一(yī)定時(​™shí)間(jiān)後仍然沒有(yǒu)任何頁面繪制(zhì)，則認定為(wèi)白(b♦©€ái)屏，白(bái)屏率 = 白(bái)屏發♥★<生(shēng) PV / 小(xiǎo)程序冷(lěng)啓動打開(kāi) •≤'PV。白(bái)屏率通(tōng)常是(shì)極端情況下(xià)的€±(de)應用(yòng)表現(xiàn)，比如(rú)在無網、₽β©弱網、後端無返回或返回錯(cuò)誤情況下(xià)的(de)行(xíng)為(wèi)，雖σ‍♦•然大(dà)部分(fēn)情況下(xià)不(bù)能(néng)給用(yòng)戶有(yǒu ∏•λ)用(yòng)的(de)信息，但(dàn)是(shì)♥"需要(yào)有(yǒu)兜底的(de)策略防止用(yòng)戶得(de)不(bù)☆™•到(dào)反饋，如(rú)果得(de)不(bù)到(dào)反饋用(yòng)₹∑≠$戶就(jiù)會(huì)認為(wèi)是(shì)程序出了<≈₩Ω(le)問(wèn)題，他(tā)不(bù)會(huì)去(qù)考慮環境的(de)問(wèn≤ )題，也(yě)不(bù)會(huì)去(qù) debγ™γ‌ug ，你(nǐ)可(kě)能(néng)就(jiù)會(huì)因此失去(qù‍€ )一(yī)個(gè)用(yòng)戶。

服務可(kě)用(yòng)性：包括

1. HTTP請(qǐng)求訪問(wèn)失敗率：請(qǐng←☆ )求後端服務時(shí)的(de)失敗率，失敗率 = 請(qǐng)求失敗次數(shù) / β≈Ω請(qǐng)求數(shù)量。
2. JSError：小(xiǎo)程序運行(xíng)過程中發生'ε(shēng)的(de) JS error。

服務可(kě)用(yòng)性代表了(le)錯(cuò)誤情÷Ω≠≈況下(xià)的(de)應用(yòng)表現(xiàn)，錯±$€>(cuò)誤按照(zhào)來(lái)源方簡單分(fēn)為('Ωwèi)兩種，一(yī)個(gè)是(shì)服務器(qì)端的(de£★​)錯(cuò)誤，具體(tǐ)的(de)表現(xiàn)就(jiù)是(shì)HTTP請(qǐn↑δ≠÷g)求失敗，一(yī)種是(shì)前端的(de)錯(cuò)誤，也(yě)就(jiù)是(s∞'≥hì)JS error。這(zhè)些(xiē)錯(cuò)誤有(yǒu)可(§₽✘kě)能(néng)什(shén)麽都(dōu)不(bù)影(yǐng)響，↑$但(dàn)也(yě)可(kě)能(néng)嚴重到(dào)導緻程序異常不(b☆∑₽ù)能(néng)運行(xíng)，需要(yào)具體(tǐ)問(wènλφπ)題具體(tǐ)分(fēn)析。

你(nǐ)可(kě)以在 開(kāi)發者平台-開(kāi)發管理(lǐ)-運維中心

看(kàn)到(dào)這(zhè)三個(gè)指标的(de)詳細情況。我們可(kěσφ)以看(kàn)到(dào)白(bái)屏率和(hé)服<$務可(kě)用(yòng)性其實标志(zhì)了(le)應用(yòng)的(d λ≠♠e)穩定性和(hé)錯(cuò)誤/異常場(chǎng)景下(xià)的(de)表現(xiàn)，♣✔±而 FMP ，是(shì)在正常的(de)業(yè)務場(chǎng)景下(xià)最↓≤'直觀的(de)描述小(xiǎo)程序性能(néng)的>®©(de)指标，下(xià)面我們就(jiù)圍繞如(rú)何“如(rú)何降低(¥π↕↔dī)小(xiǎo)程序 FMP 講一(yī)下(xià)提升小(xiǎo)程序性能(néng)的"₽>(de)“三闆斧”。

第一(yī)闆斧-斷舍離(lí)，減少(shǎo)小←↕(xiǎo)程序包體(tǐ)積

我們知(zhī)道(dào)，小(xiǎo)程序在發布的(de)時(shí)候都(dōu)是(s£™✔hì)先将本地(dì)的(de)代碼打個(gè)包，然後上(shàng)傳到(dào)服務器(q&‌ì)，用(yòng)戶在使用(yòng)我們的(de)小(xiǎo)程序時(shí)首先會εδ♥☆(huì)先下(xià)載代碼包，然後宿主app中的(de)小§✘♦π(xiǎo)程序框架【todo，小(xiǎo)程序核心是(shì'★)什(shén)麽意思？？】會(huì)根據代碼包進行(xíng)渲染。用(yòng)戶的(de)網絡情況我們不(bù)能(néng)控制(∏←zhì)，但(dàn)代碼包的(de)大(dà)小(xiǎo)我們還(hái)是(shì)可(‌₽≥kě)以把控的(de)。減少(shǎo)代碼包體(tǐ)積就(jiù)是(shì)一(βσ"πyī)種最簡單也(yě)是(shì)最直接的(de)方法【todo，可‍φ‍(kě)能(néng)會(huì)被argue，很(hěn)多(duō)開(kāi↕λ)發者做(zuò)了(le)體(tǐ)積裁剪，但(dànπε™)是(shì)并不(bù)生(shēng)效】。

能(néng)删除的(de)資源删除，實在不(bù)能(néng)♥÷删除的(de)壓縮

用(yòng)戶打開(kāi)小(xiǎo)程序時(shí)隻會(huì)看(kàn)到(dà₽ε£÷o)一(yī)個(gè)頁面，那(nà)麽我們可(kě)以把其它頁面•​ 都(dōu)删掉，隻保留這(zhè)一(yī)個(gè)頁面，這(•₽→δzhè)樣FMP就(jiù)可(kě)以降下(xià)去(qùλ‌₽)。

手動狗頭保命，當然不(bù)能(néng)這(zhè)麽做(zuò)，除非飯∏≥‍碗不(bù)想要(yào)了(le)...

但(dàn)是(shì)這(zhè)個(gè)思路(lù)是(shì)㣶★可(kě)以借鑒的(de)。事(shì)實上(shàng)，如(rú)果你(nǐ)的≤÷(de)小(xiǎo)程序經曆過了(le)多(duō)次叠代，經手過了(le)不(bù)同↓≤的(de)開(kāi)發人(rén)員(yuán)之後，你(nǐ)會(huì§♥←β)發現(xiàn)，小(xiǎo)程序的(de)功能(néng)更完善了(le)，π¥↔包體(tǐ)積也(yě)不(bù)斷的(de)增加了(le)，然而，這(zhè)☆★$些(xiē)頁面這(zhè)些(xiē)功能(néng)真的(de)都(dōu)是(sh>§ε¥ì)必須的(de)嘛？在 開(kāi)發者平台-數(shù)據分(fēn)析-行(xíng)為(wèi)分(fēn)析-頁​γ₩面分(fēn)析-頁面訪問(wèn)量

可(kě)以看(kàn)到(dào)你(nǐ)的(de)小(xiǎo)程序各個(gè)頁÷↓✘​面流量的(de)情況，對(duì)大(dà)部分(fēn)的(de)小(xiǎo)程序而☆∑↔言，流量隻集中在少(shǎo)數(shù)的(de)幾個(gè)頁面上(shàng)，有(y₩↕ǒu)些(xiē)頁面根本沒有(yǒu)流量，那(nà)這(zhè)些(xiēδ$ )沒有(yǒu)流量的(de)頁面與功能(néng)是(shì)不(bù)是(shì‍≤δ•)也(yě)可(kě)以從(cóng)小(xiǎo)程序中摘除呢(ne)？當然可(kě)以。

從(cóng)小(xiǎo)見(jiàn)大(dà)，沒有(yǒu♥ )用(yòng)的(de)頁面可(kě)以删除，沒有(yǒu)用(y≥ òng)到(dào)的(de)資源也(yě)可(kě)以從(cóng)小(xiǎo)程序包中删除↓ ♦，包括自(zì)定義組件(jiàn)、npm 包、css、圖≠÷片。

在智能(néng)小(xiǎo)程序開(kāi)發的(de)過​®程中，經常需要(yào)引入圖片資源。如(rú)果使用(yòng)圖片不(bù)當（過多(d'>®☆uō)過大(dà)的(de)圖片），在加載時(shí)會(h§'uì)消耗更多(duō)的(de)系統資源，從(cóng)而影(yǐ‌←ng)響整個(gè)頁面的(de)性能(néng)，因此做(zuò)好(hǎo)≈©Ω圖片優化(huà)非常重要(yào)。【todo，這(zhè)個(gè)話φ©©(huà)術(shù)不(bù)一(yī)定合适，可(kě)✔π>以參看(kàn)一(yī)下(xià) https://smartprogram.baid ♠ ≠u.co... 這(zhè)篇文(wén)章(zhāng)裡(lǐ)的(de)說(shuō)明‌★(míng) update:已改為(wèi)“在智能(néng)小(xiǎoπ×)程序開(kāi)發的(de)過程中，經常需要(yào)引入圖片資源。如(rú✘✔₽✔)果使用(yòng)圖片不(bù)當（過多(duō)§​ε過大(dà)的(de)圖片），在加載時(shí)會(huì)消耗更多(duō★♥)的(de)系統資源，從(cóng)而影(yǐng)響整個(gè)頁面的(de)性能(né>₹®ng)，因此做(zuò)好(hǎo)圖片優化(huà)非常重要(y§•ào)。“】，小(xiǎo)程序包中的(de)圖片會(h→​uì)随小(xiǎo)程序包一(yī)起下(xià)載，而這 ÷(zhè)些(xiē)圖片其實可(kě)以放(fàng)到(dào)靜(jìng)态資源服≤ €務器(qì)上(shàng)，小(xiǎo)程序代碼中直接使用(yòng)圖片地☆&₩(dì)址就(jiù)好(hǎo)。如(rú)果特别需要(yào)使用(yòng)圖片，别•↕≠"忘了(le)在小(xiǎo)程序開(kāi)發者工(gōng‍∏↑)具-項目信息-本地(dì)配置-上(shàng)傳代碼時(shí)開(kāi)啓圖±γ片壓縮。

将入口頁占比較高(gāo)的(de)頁面分(fēn)到(dào)主包，其它頁面分(fēn ε)到(dào)子(zǐ)包

分(fēn)包 是(shì)小(xiǎo)程序官方提供的(de)減少(shǎo)包體(tǐ)積的(‌αde)方法，開(kāi)發者可(kě)以将智能(néng)小(xiǎo)程序劃分δ≈&(fēn)成不(bù)同的(de)子(zǐ)包，在構建時(shí)打包成不(b®☆¥ù)同的(de)分(fēn)包，用(yòng)戶在使用(yò₽→ng)時(shí)按需進行(xíng)加載。建議(yì)按照(zhào) 開(kāi)發者平台-數(shù)據分(fēn)析-行(✘↓φ©xíng)為(wèi)分(fēn)析-頁面分(fēn)析-入口頁≠→面次數(shù)

降序來(lái)分(fēn)包，将做(zuò)入口頁多(d •σ♠uō)的(de)頁面放(fàng)到(dào)主包中，其它的(de)頁面适當的(de)分(fē✔↔±♣n)包即可(kě)。

需要(yào)注意的(de)是(shì)，在分(fē∏ n)包之後，頁面的(de)路(lù)徑也(yě)會(huα£↕ì)變化(huà)，如(rú)果之前某些(xiē)頁面做(zuò)過推廣活動，為(w≠'₹÷èi)了(le)防止用(yòng)戶找不(bù)到(dào)頁面，可(kě)以使$​用(yòng) 自(zì)定義路(lù)由 的(de)功能(néng)将原地(dì)址映射到(±λdào)新地(dì)址上(shàng)。

第二闆斧-存數(shù)據，巧用(yòng)緩存與官方能(néng)力

快(kuài)速的(de)展示首屏是(shì)我們的(de)目的(de)，為™×(wèi)了(le)快(kuài)速的(de)展示首屏，有(yǒu)些(xiē)東(d↓λ↑↓ōng)西(xī)要(yào)放(fàng)棄，有(yǒu)些(xiē)東(dōn'♥☆g)西(xī)要(yào)妥協。使用(yòng)官方提供的(de)性能(néng)優化(huà÷♥∞)的(de)方法，雖然不(bù)是(shì)那(nà)麽優雅，但(dàn)确實是(s∞±£∞hì)提升性能(néng)的(de)好(hǎo)手段。而緩存這(zh"©è)種用(yòng)空(kōng)間(jiān)換取時(shí)間(jiān)β×∑的(de)策略，在性能(néng)優化(huà)的(de)方法上(★♠πshàng)是(shì)真的(de)實用(yòng)×γπ©有(yǒu)效。

使用(yòng) prelink ，使用(yòng) onInit

prelink 隻需在 開(kāi)發者平台-開(kāi)發管理(lα♣π$ǐ)-設置-開(kāi)發設置-服務器(qì)配置

配置，你(nǐ)就(jiù)可(kě)以得(de)到(dào) 200ms 的(de)提α' ∞升，這(zhè)簡直是(shì)官方給你(nǐ)的(de)尚方寶劍，用(y≥'​λòng)不(bù)用(yòng)看(kàn)你(nǐ)了(le)。它的(de)原理→€∑(lǐ)是(shì)提前建立 TCP 連接和(hé)複用(yòng) TCP≤♥ 連接。需要(yào)注意的(de)是(shì)，配置的(de)請→​‌&(qǐng)求地(dì)址是(shì)需要(yào)支持 HEAD 類型請(qǐng)求的₹→(de)。

onInit 是(shì)官方給你(nǐ)的(de)又(yòu)一(yλ→✘ī)個(gè)魔法，隻需要(yào)把 onLoad() 中的(de)獲取數(shù)據的(de)方法在 onInit() 中再進行(xíng)一(yī)遍即可(kě)。就(jiù)這(zhè)麽簡單。

// 修改前

onLoad() {

this.getPageData();

}

// 修改後

onInit() {

if (!this.onInitLoaded) {

this.onInitLoaded = true;

this.getPageData();

}

},
★≥↔→

onLoad(options) {

if (!this.onInitLoaded) {

this.onInitLoaded = true;

this.getPageData();

}

}

緩存 API 端能(néng)力

API端能(néng)力是(shì)小(xiǎo)程序提供的(de)不(bù)同于普通(tōng)¶'♣ web 應用(yòng)的(de)功能(néng)，這(zhè)些(xiē)功能(©×néng)方便了(le)開(kāi)發者去(qù)實現(xià♣→n)豐富的(de)應用(yòng)，但(dàn)端能(néng)δπ力實際上(shàng)是(shì)有(yǒu)性能(βΩ£γnéng)消耗的(de)，和(hé)普通(tōng)的(de☆¥$β) js 語句相(xiàng)比執行(xíng)起來(lái↑απ)要(yào)慢(màn)一(yī)些(xiē)，為(wα&èi)了(le)抹平這(zhè)種差異，一(yī)些(xiē)不(bù)常變化(huà)的(de) A∏•★PI 端能(néng)力結果其實可(kě)以緩存起來(lái)，ε♦‌ 多(duō)次獲取時(shí)直接從(cóng)我們緩存的(de)數(shù)據中♣ §←獲取。

const cached = swan.getStorageSyδ£nc('apiResultCached') || {};

const promiseCache = new Map();

const MAX_CACHE_TIME = 1000 * 60 * 60 * 24 * 7;

// 緩存方法

function memorize(fn) {

const apiName = fn.name;

return function () {

if (cached[apiName]) {

if (Date.now() - cached[apiName]['__timestamp'] < MAX_CACHE_TIME) {

return Promise.resolve(cached[apiName]);

}

Ω₽π>
cached[apiName] = null;

}

let promise = promiseCache.get(apiName);

if (promise) {

return promise;

}

promise = new Promise((resolve, reject) => {

fn().then(res => {

cached[apiName] = res;

c β ≤ached[apiName]['__timestamp'] = Date.now();

swan.setStorage({

key: 'apiResultCached',

data: cached

});

resolve(res);

}).catch☆♥€​(e => {

reject(e);

}).finally(() => {

promiseCache.delete(apiName);

});

})€→₩π;

promiseCache.set(apiNameφ$, promise);

return promise;

};

}

function getSystemInfoAPI() {

return new Promise((resolve, reject) => {

swan.getSystemInfo({

success: res => resolve(res),

fail: err => reject(err)

});

});

}

// 這(zhè)裡(lǐ)隻緩存了(le)swan.getSystemInfo，一(¶♦♠←yī)些(xiē)其它的(de)API方法，隻要(yào)是(shì)不(bù)長(chán€÷¶g)變化(huà)的(de)都(dōu)可(kě)以緩存起來(lái)

export const getSystemInfo = memorize(getSyste×↓§mInfoAPI);

緩存頁面主數(shù)據

如(rú)果頁面的(de)數(shù)據是(shì)φ'•©靜(jìng)态的(de)，直接寫到(dào) Page 的(de) data 中即可(kě)，但(dàn)實際大(dà)部分(fēn)情況&±是(shì)，頁面一(yī)部分(fēn)是(shì)前端就(jiù)可(kě)以渲染的(£→de)靜(jìng)态的(de)結構與數(shù)據，另一(yī)部分(fēnπ♣€₩)是(shì)從(cóng)後端接口獲取的(de)數 &≤(shù)據。從(cóng)後端接口獲取的(de)首屏數(shù)據可(kě)以緩存到(dào)≈<¥↕ storage 中，這(zhè)樣在第二次加載這(zhè)個(gè)頁面的(de)δ≈¥§時(shí)候可(kě)以從(cóng) storage 中獲取，同時(shí)異步發起請(qǐng)求，請(qǐng)求返回後再更新頁面數(shù)據。注€​≤意，我們是(shì)為(wèi)了(le)更快(kuài)的(de)展現(>∑xiàn)頁面，所以隻緩存和(hé)加載首屏可(kě)見(jiàn)的(de)數(shù)據即可(kě)，非首≠±屏數(shù)據延遲加載。

// 從(cóng)storage中獲取頁面數(shù)據

swan.getStorage({

key: 'pageData',

success: res => {

// 如(rú)果有(yǒu)緩存且異步請(qǐng)求未返回則使用(yò ↔γ☆ng)緩存的(de)數(shù)據渲染頁面

if (res.data && !this.requestBack) {

this.renderPage(data);

}

}

});

// 異步發起請(qǐng)求獲取頁面數(shù)據

getPageData().then(res => {

this.requestBack = true;

// 請(qǐng)求返回後根據最新數(shù)據渲染頁面

this.renderPage(res.pageData);

// 同時(shí)緩存頁面數(shù)據到(dào)storage中Ω ↓φ

swan.setStorage({

key: 'pageData',

data: res.pageData

});

});

這(zhè)樣做(zuò)可(kě)能(néng)會(huì)帶來(lái)一(y∏γ↓ī)個(gè)問(wèn)題，就(jiù)是(shì)頁面數 ® (shù)據加載後并不(bù)一(yī)定是(shì)最新的(de)數(s≠ hù)據，最新的(de)數(shù)據從(cóng)請(qǐng)求獲取到(dào)後會(hγ÷uì)刷新頁面的(de)數(shù)據。所以，如(rú)果你(nǐ)的(de)應用(yòngλ©™≥)對(duì)實時(shí)性的(de)要(yào)求比較高(gāo)的(de)話(huà)↓₽∞可(kě)能(néng)并不(bù)适合使用(yòng)這(zhè•')種方法。

第三闆斧-輕渲染，隻渲染必須的(de)內(nèi)容

在小(xiǎo)程序加載過程中，邏輯代碼和(hé)渲染代碼是(shì)分($•×₽fēn)離(lí)的(de)，分(fēn)别由不(bù)同的(₽☆Ωde)線程進行(xíng)。

慢(màn)的(de)線程會(huì)拖累整個(gè)加載的(de)速度，當你(nǐ)的(de)邏σ→‌♦輯代碼已經跑的(de)飛(fēi)起的(de)時(shí)候，可(kě)以考慮下∏₩"(xià)是(shì)否在渲染的(de)層面有(yǒu)改進的(de)辦法。

減少(shǎo)對(duì)渲染有(yǒu)消耗的(d®↓πe)寫法

小(xiǎo)程序本身(shēn)提供了(le)豐富多(duō)彩™∏₩®的(de)用(yòng)法，包括自(zì)定義組件(jiàn)、動态庫、₹€filter、sjs等等，這(zhè)些(xiē)功能(néng)提升了(leα←♥)我們開(kāi)發的(de)效率，但(dàn)另一(yī)方→β↕面，多(duō)種多(duō)樣的(de)功能(néng)有(y♠""ǒu)可(kě)能(néng)帶來(lái)新的(de)的(de)性能(néng)消耗陷阱。你(nǐ)需要(yào)在效率和(hé)性能(néng)之間(jiā☆‌n)找尋一(yī)種平衡，有(yǒu)哪些(xiē)用(yòng)法提升的(de€→☆)效率有(yǒu)限而帶來(lái)的(de)性能(néng)₹β 消耗卻是(shì)不(bù)可(kě)忽視(shì)​✔♣的(de)？這(zhè)需要(yào)結合自(zì)身(shēn)業(yè)務的(d☆φΩe)實踐，但(dàn)在 FMP 占比較高(gāo)的(de)頁面，這(z®​™×hè)些(xiē)功能(néng)還(hái)是(shì)需¥​&要(yào)慎之又(yòu)慎。

另外(wài)，也(yě)需要(yào)注意 減少(shǎo)view和(♥♣hé)text組件(jiàn)的(de)特殊屬性和(hé)事(shì>♦  )件(jiàn) ，這(zhè)是(shì)很(π∑ hěn)容易忽視(shì)的(de)一(yī)點，雖然¥₹單次使用(yòng)帶來(lái)的(de)性能(néng)消耗有(yǒu"σ)限，但(dàn)是(shì)要(yào)用(yòng)到(dào) view 和"≠≠(hé) text 組件(jiàn)的(de)地(<× φdì)方太多(duō)了(le)，架不(bù)住使用(yò★&ng)數(shù)量的(de)上(shàng)升帶來(lái)質的(✔φ→de)改變。尤其是(shì)自(zì)定義組件(jiàn)中使↑×∑ 用(yòng)了(le)低(dī)性能(néng)的(d♦✔≤e)寫法，因為(wèi)自(zì)定義組件(jiàn)可(kě)能(néng)會(huì)被 $₽用(yòng)到(dào)多(duō)次（例如(rú)列表項，甚至∑☆¥可(kě)能(néng)會(huì)被用(yòng)上(shà‌♥₽ng)百次上(shàng)千次），低(dī)性能(n®&éng)的(de)自(zì)定義組件(jiàn)會(huì)帶來(lái)成倍的(de)性能(n××∏éng)消耗。

// 修改前 view 使用(yòng)了(le) style 屬性

<view style="height: 20rpx;">熱(rè)門(mén)榜單view>

// 修改後 view 使用(yòng)了(le) class ，在 css 文(<∏←>wén)件(jiàn)中寫樣式

.title {

height: 20rpx;

☆​
}

<view class="title">熱(rè)門(mén)榜單view>

分(fēn)屏渲染

設想一(yī)下(xià)，當我們加載一(yī)個(gè)長(cháng→∏≈↕)度超過一(yī)個(gè)屏幕的(de)列表時(shí)，其實用(yòng)戶♣Ω不(bù)會(huì)看(kàn)到(dào)列表的(de)→♦↓♦所有(yǒu)內(nèi)容，隻能(néng)看(kàn)到(dào)列表的(d♣♥‌e)前幾項，那(nà)麽我們當然可(kě)以隻加載列表的(de)前幾項，當用∏¥(yòng)戶滑動的(de)時(shí)候再加載剩餘的(de)內(nèi)容。γ'同樣的(de)，在渲染頁面的(de)時(shí)候，我們也(yě)可(kě)→δ以在第一(yī)次 setData 時(shí)進行(xíng)數(shù)據的(de)分(fēn)割，隻©£¥<設置首屏可(kě)見(jiàn)的(de)數(shù)據，延遲設置非首屏數(shù)據。

// appList是(shì)從(cóng)後端接口獲取的(de)頁面數(shù)據 aβ≈≤ctive是(shì)當前可(kě)見(jiàn)的(de)λ<tab索引

// firstLoadAppList為(wèi)計(jì)算(suàn)出的(dγ> ☆e)首屏幕數(shù)據

const firstLoadAppList = appList.map(↓™₹✔(item, index) => {

return index === active ? item.slice(0, 10) : [];

});

this.setData({

appList: firstLoadAppList

}, () => {

// 可(kě)将完整數(shù)據記錄待之後加載

this.appList = appList;

});

取消骨架屏采用(yòng)漸進式加載

骨架屏 是(shì)小(xiǎo)程序提供的(de)一(yī)種優化(hu↑'à)用(yòng)戶體(tǐ)驗的(de)機(jī)制(zhì)，但•π≠π(dàn)其實任何渲染都(dōu)有(yǒu)消耗，骨α&Ω>架屏也(yě)是(shì)。在骨架屏中寫了(le)複雜(zá)的(de)結構甚至動畫β₹±(huà)效果，反而不(bù)利于真正的(de)有(yǒu)意義的(£♣‌de)頁面快(kuài)速的(de)加載。當然，骨架屏确實可(k♠↑ě)以讓用(yòng)戶更快(kuài)的(de)感知(zhī)到​'(dào)頁面正在加載，所以需要(yào)在這(zhè)之間(jiān)尋找一(yī)σγ Ω種平衡，是(shì)需要(yào)用(yòng)戶先看(kàn™÷÷>)到(dào)一(yī)個(gè)正在加載的(de)頁♦∏≥​面，還(hái)是(shì)讓用(yòng)戶更快(→​kuài)的(de)看(kàn)到(dào)有(yǒu)意義的(de)有(yǒu)內(n™'èi)容的(de)畫(huà)面。推薦的(de)一(yī)個(gè)方案是✔Ω(shì)：

• 使用(yòng)官方提供的(de)骨架屏，但(dàn)簡化(huà)骨架屏的(de)框架，減少→​©(shǎo)使用(yòng)樣式與動畫(huà)效果
• 在真正的(de)頁面渲染中，為(wèi)各個(gè)部分(fēn)設置背景色與高(gāo)度，在Ω§↑ Page 的(de) data 中設置默認值，在還(hái)未進行(xíng)第一(yī)次 setData 的(de)時(shí)候渲染出頁面的(de)框架。這(zhè)樣，¥®當頁面數(shù)據來(lái)了(le)的(de)時 ÷(shí)候，隻是(shì)在特定的(de)部分(fēn)填充值即可(kě∑←)。

後記

歡迎在 小(xiǎo)程序開(kāi)發者社區(qū) 中‍♦∑∞提問(wèn)性能(néng)相(xiàng)關的(de)問(wèn)題★₹∏✔，也(yě)歡迎在Github上(shàng) follo♦<✔¥w我，我會(huì)不(bù)定期更新一(yī)些(xiē)前¶&≤γ端相(xiàng)關的(de)文(wén)章(zhāng)，如(rú) ¶ε©果想更深入的(de)和(hé)我討(tǎo)論小(xiǎo)程序性能(néng)相 ≠&(xiàng)關的(de)問(wèn)題，可(kě)以給我發郵件(jiàn)。