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

場(chǎng)景：

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

優(yōu)化方案：

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

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

2.避免使用大圖

場(chǎng)景：

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

優(yōu)化方案：

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

3.小程序、APP分包處理pages過多

前往官網(wǎng)手冊(cè)查看配置

4.圖片懶加載

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

5.禁止濫用本地存儲(chǔ)

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

6.可在外部定義變量

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

7.分批加載數(shù)據(jù)優(yōu)化頁面渲染

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

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

8.避免視圖層和邏輯層頻繁進(jìn)行通訊

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

9.CSS優(yōu)化

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

10.善用節(jié)流和防抖

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

11.優(yōu)化頁面切換動(dòng)畫

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

優(yōu)化方案：

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

12.優(yōu)化背景色閃白

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

優(yōu)化方案：

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

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

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

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

13.優(yōu)化啟動(dòng)速度

• 工程代碼越多，包括背景圖和本地字體文件越大，對(duì)小程序啟動(dòng)速度有影響，應(yīng)注意控制體積
• App端的 splash 關(guān)閉有白屏檢測(cè)機(jī)制，如果首頁一直白屏或首頁本身就是一個(gè)空的中轉(zhuǎn)頁面，可能會(huì)造成 splash 10秒才關(guān)閉
• App端使用v3編譯器，首頁為 nvue頁面 時(shí)，并設(shè)置為fast啟動(dòng)模式，此時(shí)App啟動(dòng)速度最快

App設(shè)置為純 nvue項(xiàng)目 （manifest里設(shè)置app-plus下的renderer:"native"），這種項(xiàng)目的啟動(dòng)速度更快，2秒即可完成啟動(dòng)；因?yàn)樗麄€(gè)應(yīng)用都使用原生渲染，不加載基于webview的那套框架

14.優(yōu)化包體積

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

15.禁止濫用外部js插件

描述：
有官方API的就不要額外引用js插件增加項(xiàng)目體積
例如：
url傳參加密直接用 encodeURIComponent() 和 decodeURIComponent()

到此這篇關(guān)于uniapp項(xiàng)目優(yōu)化方式及建議的文章就介紹到這了,更多相關(guān)uniapp項(xiàng)目優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論