摘要：希望大家看完這篇文章能對小程序性能優(yōu)化有一定的認(rèn)識，如果有錯誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評指正，如果喜歡，歡迎點贊收藏。

小程序從發(fā)布到現(xiàn)在也已經(jīng)有將近兩年的時間，越來越來多的公司開始重視小程序生態(tài)帶來的流量，今年也由于小程序平臺對外能力的越來越多的開放以及小程序平臺的自身優(yōu)化，越來越多的開發(fā)者也自主的投入到小程序的開發(fā)當(dāng)中，現(xiàn)在，作為前端如果會寫小程序，絕對是一個不折不扣的面試加分項。
相信不少人剛接觸小程序時的感覺大都是小程序很簡單，開發(fā)只要是會寫html、css、js就可以了，但是當(dāng)自己的第一個小程序開發(fā)完成上線時，卻發(fā)現(xiàn)小程序體驗非常糟糕，接下來就讓我們一窺小程序優(yōu)化之道。

要想給小程序做優(yōu)化，對小程序的加載流程一定要有一定的了解，小程序是怎么加載的，讓我們先來看一個圖片：

這三個圖片大家一定都不陌生，當(dāng)你打開一個小程序的時候就會經(jīng)歷這三個過程：

資源準(zhǔn)備，這個過程就是小程序在下載你的代碼包的過程

業(yè)務(wù)代碼注入和渲染，這個過程就是小程序?qū)⒌臉I(yè)務(wù)代碼分別注入視圖層和邏輯層，并在視圖層做視圖的渲染

異步數(shù)據(jù)的請求，顯示加載中的時候，其實就是在到達(dá)首頁時，如果首頁有異步數(shù)據(jù)請求，這個時候小程序就會執(zhí)行異步數(shù)據(jù)請求

上述就是對小程序的啟動過程的一個簡單概述，讓我們再來看一個更加具體一點的圖片，可能會更好理解小程序啟動過程：

從這個圖片可以看到，小程序在啟動加載的時候，其實分為兩部分，一部分是邏輯層的啟動啟動，另一部分是視圖層的啟動，邏輯層的啟動就是加載小程序的js代碼，視圖層的啟動webview對頁面進行加載和渲染，那預(yù)加載又是什么時候執(zhí)行的呢？其實在微信動的時候，小程序平臺就開始靜默執(zhí)行與加載的過程，包括JS引擎初始化和WebView的初始化，然后會注入小程序自帶的公共庫，例如自帶api、組件等，后面的小程序啟動，就是上面說過的打開一個小程序具體的啟動加載過程了，下載代碼包，分別注入邏輯層和視圖層，然后共同完成首屏渲染。

講完小程序的啟動過程，就可以開始介紹具體的性能優(yōu)化方案了，讓我們一起看看影響小程序性能的因素以及具體的解決辦法

代碼包大小會直接影響小程序的啟動速度，代碼包越大，小程序的啟動時間就越長，在小程序啟動時，下載代碼包和代碼注入的時間和小程序代碼包大小是成正比的，一般小程序的平均啟動時間是2s左右，可以看看你的小程序有沒有拖后腿，那么如何控制包大小呢？

開啟開發(fā)工具”上傳代碼時自動壓縮”，小程序開發(fā)工具有一個上傳代碼時自動壓縮的功能，當(dāng)開啟時，會在你上傳代碼時為你做代碼壓縮，除了這個，我們也可以通過使用第三方打包工具做代碼壓縮，如webpack、grunt、grulp。

及時清理無用代碼和資源文件，無用的代碼和資源也會占用一定的包大小。

減少代碼包中的資源文件，將資源存放在cdn上，小程序開發(fā)工具對資源文件的壓縮比率非常低，資源有條件的可以盡量放在CDN上，因為小程序開發(fā)工具對資源文件的壓縮比率非常低，只有10%左右，或者也可以用第三編譯工具對資源文件自己進行壓縮處理

分包加載是小程序提高加載啟動性能的一個重要方法，如果有人還不了解，可以點開鏈接看官方介紹，那么如何做好分包加載呢？
將小程序中不常用的代碼放在分包中，主包內(nèi)只保留用戶最常訪問的頁面，但是由于官方規(guī)定tab頁面只能放在主包中，因為小程序啟動時只會加載主包，使用時按需下載分包，不會在加載時一次將整個代碼包下載，這樣就能有效減少啟動加載的時間。
但是分包加載也有它的局限性，用戶首次打開分包頁面時，需要先進行分包代碼的加載和注入，會造成頁面切換時產(chǎn)生一定的延時，因此在此基礎(chǔ)上，官方又推出了分包預(yù)加載和獨立分包。

先來看一下之前分包加載時的流程是怎樣的：

那么分包預(yù)加載是怎么干的呢？分包預(yù)下載：提前配置可能會跳到哪些分包，框架在進入頁面后根據(jù)配置進行預(yù)下載，分包預(yù)加載會在你進入主包頁面后，為你靜默開啟分包代碼的下載和注入，這個過程是無感的，來看一下分包預(yù)加載的流程是怎樣的：

分包預(yù)加載需要注意的是：同一個分包中的頁面享有共同的預(yù)下載大小限額2M，限額會在工具中打包時校驗，因此不能把所有的分包頁面都配置到分包預(yù)加載的配置中，只配置主包頁面會跳轉(zhuǎn)的頁面即可。

獨立分包又是什么呢？由于從分包頁面啟動是，必須要依賴于主包的下載和注入，啟動速度會受到主包大小的制約，因此這就有了獨立分包，獨立分包在啟動分包頁面時，可以獨立啟動而不需要依賴主包，這樣就可以減少主包下載和注入的時間，通常情況下我們會將活動、廣告一類的具有獨立邏輯的功能代碼標(biāo)記為一個獨立分包，在分包頁面啟動時，可以不依賴于主包啟動，只下載分包代碼進行注入。讓我們來看一下獨立分包的加載流程是怎樣的：

首屏加載的體驗對小程序來說十分重要，那么如何提升首屏加載性能呢？

提前請求：異步數(shù)據(jù)數(shù)據(jù)請求不需要等待頁面渲染完成

利用緩存：利用storage API對異步請求數(shù)據(jù)進行緩存，二次啟動時先利用緩存數(shù)據(jù)渲染頁面，再進行后臺更新

避免白屏：先展示頁面骨架和基礎(chǔ)內(nèi)容

及時反饋：及時地對需要用戶等待的交互操作給出反饋，避免用戶以為小程序沒有響應(yīng)

要想提高渲染性能，就需要知道小程序如何做頁面渲染的，讓我們先來看一個頁面渲染的流程圖：

js引擎和native都可以過js的計算或者data修改來對Webview發(fā)起繪制操作，但是對開發(fā)者來說最重要的就是js引擎和Webview之間的通信，這通信過程是一個跨進程通信，是非常耗時的一個過程，我們要提高渲染的性能，也就是減少這個跨進程通信的時間，那么怎么去減少跨進程通信的時間呢？

使用data在方法間共享數(shù)據(jù)，會增加setData傳輸?shù)臄?shù)據(jù)量，同時會增加頁面重繪的概率

data僅包括與頁面相關(guān)的數(shù)據(jù)

使用setData傳輸大量數(shù)據(jù)，通訊耗時與數(shù)據(jù)量正相關(guān)，頁面更新延遲可能造成更新開銷增加

僅傳輸頁面中發(fā)生變化的數(shù)據(jù)，使用setData的特殊key實現(xiàn)局部更新

后臺頁面進行setData搶占前臺頁面的資源

頁面切入后臺后的setData調(diào)用，延遲到頁面重新展示的時候執(zhí)行

總結(jié)來說就是在data中只定義與頁面渲染相關(guān)的數(shù)據(jù)，其他與頁面渲染無關(guān)的數(shù)據(jù)都定義成普通變量，在做setData操作時，盡量只傳輸頁面渲染需要的數(shù)據(jù)，當(dāng)頁面切換時，將后臺執(zhí)行的setData操作銷毀，等到頁面重新展示的時候再執(zhí)行。

只在必要的時候監(jiān)聽pageScroll事件

避免在onPageScroll中執(zhí)行復(fù)雜邏輯

避免在onPageSroll中頻繁調(diào)用setData

避免頻繁查詢節(jié)點信息(SelectQuery),部分場景使用節(jié)點布局相交狀態(tài)監(jiān)聽(IntersectionObserver)替代

由于onPageSroll事件監(jiān)聽在處理js引擎和webview之間的通信時也是一個跨進程通信，因此在使用onPageScroll事件時，要注意以上的幾點內(nèi)容，來進行相關(guān)的優(yōu)化

在需要頻繁更新的場景下，自定組件的更新只在組件內(nèi)部更新，不受頁面其他部分內(nèi)容復(fù)雜性影響，這樣也可以在一定程度優(yōu)化渲染性能

這篇文章簡單的介紹了微信小程序性能優(yōu)化的一些方法，還有很多我沒有介紹到方法就需要大家自己去探索總結(jié)了。希望大家看完這篇文章能對小程序性能優(yōu)化有一定的認(rèn)識，如果有錯誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評指正，如果喜歡，歡迎點贊收藏。