摘要：希望大家看完這篇文章能對小程序性能優化有一定的認識，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏。

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

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

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

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

業務代碼注入和渲染，這個過程就是小程序將的業務代碼分別注入視圖層和邏輯層，并在視圖層做視圖的渲染

異步數據的請求，顯示加載中的時候，其實就是在到達首頁時，如果首頁有異步數據請求，這個時候小程序就會執行異步數據請求

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

避免白屏：先展示頁面骨架和基礎內容

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

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

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

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

data僅包括與頁面相關的數據

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

僅傳輸頁面中發生變化的數據，使用setData的特殊key實現局部更新

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

頁面切入后臺后的setData調用，延遲到頁面重新展示的時候執行

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

只在必要的時候監聽pageScroll事件

避免在onPageScroll中執行復雜邏輯

避免在onPageSroll中頻繁調用setData

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

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

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

這篇文章簡單的介紹了微信小程序性能優化的一些方法，還有很多我沒有介紹到方法就需要大家自己去探索總結了。希望大家看完這篇文章能對小程序性能優化有一定的認識，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏。