uniapp項目優(yōu)化方式及建議

更新時間：2021年08月18日 08:38:26 作者：黃勇超

性能優(yōu)化自古以來就是重中之重，本文關于uniapp項目優(yōu)化方式最全整理，會根據(jù)開發(fā)情況進行補充，感興趣的可以了解一下

1.復雜頁面數(shù)據(jù)區(qū)域封裝成組件

場景：

例如項目里包含類似論壇頁面：點擊一個點贊圖標，贊數(shù)要立即+1，會引發(fā)頁面級所有的數(shù)據(jù)從js層向視圖層的同步，造成整個頁面的數(shù)據(jù)更新，造成點擊延遲卡頓

優(yōu)化方案：

對于復雜頁面，更新某個區(qū)域的數(shù)據(jù)時，需要把這個區(qū)域做成組件，這樣更新數(shù)據(jù)時就只更新這個組件

注：app-nvue和h5不存在此問題；造成差異的原因是小程序目前只提供了組件差量更新的機制，不能自動計算所有頁面差量

場景：

頁面中若大量使用大圖資源，會造成頁面切換的卡頓，導致系統(tǒng)內(nèi)存升高，甚至白屏崩潰；對大體積的二進制文件進行 base64 ，也非常耗費資源

優(yōu)化方案：

圖片請壓縮后使用，避免大圖，必要時可以考慮雪碧圖或svg，簡單代碼能實現(xiàn)的就不要圖片

功能描述：
此功能只對微信小程序、App、百度小程序、字節(jié)跳動小程序有效，默認開啟
前往uView手冊查看配置

不要濫用本地存儲，局部頁面之間的傳參用url，如果用本地存儲傳遞數(shù)據(jù)要命名規(guī)范和按需銷毀

在 uni-app 中，定義在 data 里面的數(shù)據(jù)每次變化時都會通知視圖層重新渲染頁面；所以如果不是視圖所需要的變量，可以不定義在 data 中，可在外部定義變量或直接掛載在 vue實例上，以避免造成資源浪費

場景：
頁面初始化時，邏輯層一次性向視圖層傳遞很大的數(shù)據(jù)，使視圖層一次性渲染大量節(jié)點，可能造成通訊變慢、頁面切換卡頓

優(yōu)化方案：
以局部更新頁面的方式渲染頁面；如：服務端返回 100條數(shù)據(jù) ，可進行分批加載，一次加載 50條， 500ms 后進行下一次加載

減少 scroll-view 組件的 scroll 事件監(jiān)聽，當監(jiān)聽 scroll-view 的滾動事件時，視圖層會頻繁的向邏輯層發(fā)送數(shù)據(jù)
監(jiān)聽 scroll-view 組件的滾動事件時，不要實時的改變 scroll-top / scroll-left 屬性，因為監(jiān)聽滾動時，視圖層向邏輯層通訊，改變 scroll-top / scroll-left 時，邏輯層又向視圖層通訊，這樣就可能造成通訊卡頓
注意 onPageScroll 的使用， onPageScroll 進行監(jiān)聽時，視圖層會頻繁的向邏輯層發(fā)送數(shù)據(jù)
多使用 css動畫，而不是通過js的定時器操作界面做動畫
如需在 canvas 里做跟手操作， app端建議使用 renderjs ，小程序端建議使用 web-view 組件； web-view 里的頁面沒有邏輯層和視圖層分離的概念，自然也不會有通信折損

要知道哪些屬性是有繼承效果的，像字體、字體顏色、文字大小都是繼承的，禁止沒有意義的重復代碼

防抖：
等待n秒后執(zhí)行某函數(shù)，若等待期間再次被觸發(fā)，則等待時間重新初始化
節(jié)流：
觸發(fā)事件n秒內(nèi)只執(zhí)行一次，n秒未過，再次觸發(fā)無效

場景：
頁面初始化時存在大量圖片或原生組件渲染和大量數(shù)據(jù)通訊，會發(fā)生新頁面渲染和窗體進入動畫搶資源，造成頁面切換卡頓、掉幀

優(yōu)化方案：

建議延時 100ms~300ms 渲染圖片或復雜原生組件，分批進行數(shù)據(jù)通訊，以減少一次性渲染的節(jié)點數(shù)量
App 端動畫效果可以自定義; popin/popout 的雙窗體聯(lián)動擠壓動畫效果對資源的消耗更大，如果動畫期間頁面里在執(zhí)行耗時的js，可能會造成動畫掉幀;此時可以使用消耗資源更小的動畫效果，比如 slide-in-right / slide-out-right
App-nvue 和 H5 ，還支持頁面預載，uni.preloadPage，可以提供更好的使用體驗

場景：
進入新頁面時背景閃白，如果頁面背景是深色，在vue頁面中可能會發(fā)生新窗體剛開始動畫時是灰白色背景，動畫結(jié)束時才變?yōu)樯钌尘?，造成閃屏

優(yōu)化方案：

將樣式寫在 App.vue 里，可以加速頁面樣式渲染速度； App.vue 里面的樣式是全局樣式，每次新開頁面會優(yōu)先加載 App.vue 里面的樣式，然后加載普通 vue 頁面的樣式

app端還可以在 pages.json 的頁面的 style 里單獨配置頁面原生背景色，比如在 globalStyle->style->app-plus->background 下配置全局背景色

"style": { "app-plus": { "background":"#000000" } }

nvue頁面不存在此問題，也可以更改為nvue頁面

App設置為純 nvue項目（manifest里設置app-plus下的renderer:"native"），這種項目的啟動速度更快，2秒即可完成啟動；因為它整個應用都使用原生渲染，不加載基于webview的那套框架

uni-app 發(fā)行到小程序時，如果使用了 es6 轉(zhuǎn) es5 、css 對齊的功能，可能會增大代碼體積，可以配置這些編譯功能是否開啟
uni-app 的 H5端，uni-app 提供了搖樹優(yōu)化機制，未搖樹優(yōu)化前的 uni-app 整體包體積約 500k，服務器部署 gzip 后162k。開啟搖樹優(yōu)化需在manifest配置
uni-app 的 App端，Android 基礎引擎約 9M ，App 還提供了擴展模塊，比如地圖、藍牙等，打包時如不需要這些模塊，可以裁剪掉，以縮小發(fā)行包；體積在 manifest.json-App 模塊權(quán)限里可以選擇
App端支持如果選擇純nvue項目（manifest里設置app-plus下的renderer:"native"），包體積可以進一步減少2M左右
App端在 HBuilderX 2.7 后，App 端下掉了非v3 的編譯模式，包體積下降了3M