微信小程序如何優化？你可能不知道的優化知識大分享

微信小程序如何優化？本篇文章總結了一些小程序中初學者可能不了解的優化知識，分享給大家，希望對大家有所幫助！

頁面跳轉優先采用navigator組件

小程序提供了兩種頁面路由方式：
a. navigator 組件
b. 路由 API，如 navigateTo / redirectTo / switchTab / navigateBack / reLaunch 。

微信爬蟲抓取小程序內容時，使用 navigator 組件有利于爬蟲抓取頁面層級內容，如果你的小程序比較注重搜索優化，建議優先使用navigator 組件進行頁面間跳轉【相關學習推薦：小程序開發教程】

詳見文檔《小程序搜索優化指南》

https://developers.weixin.qq.com/miniprogram/dev/framework/search/seo.html

頁面間跳轉，使用 this.pageRouter.navigateTo 代替 wx.navigateTo 是更優的選擇

// index/index.js  Page({   wxNavigate: function () {     wx.navigateTo({       url: './new-page'     })   },   routerNavigate: function () {     this.pageRouter.navigateTo({       url: './new-page'     })   } })

假設頁面 index/index 的 js 代碼如上所示。如果此時已經跳轉到了一個新頁面 pack/index ，然后才調用到上面的 wxNavigate方法，跳轉的新頁面路徑將是 pack/new-page ；而如果調用的是 routerNavigate方法，跳轉的新頁面路徑仍然是 index/new-page 。

換而言之， this.pageRouter 獲得的路由器對象具有更好的基路徑穩定性。(一個常見的例子是，用戶點擊按鈕跳轉下一頁，有時會因為卡頓連續點擊，有可能會重復打開一個頁面，使用頁面路由器對象調用能夠避免這一情況。）

詳見《頁面路由器對象》

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Router.html

小程序長列表組件

在談到性能優化時，總會提及如何優化渲染長列表內容數據，解決的方法核心的思路就是，只渲染顯示在屏幕的數據，基本實現就是監聽 scroll 事件，并且重新計算需要渲染的數據，不需要渲染的數據留一個空的 div 占位元素。

而小程序官方提供了一個拓展組件，專門用于渲染長列表數據場景，詳見《recycle-view》：

https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

滾動驅動的動畫

根據滾動位置而不斷改變動畫的進度是一種比較常見的場景，這類動畫可以讓人感覺到界面交互很連貫自然，體驗更好,如下圖：

微信小程序針對此類動畫場景，專門做了針對 animate api增加了ScrollTimeline參數，詳見：《ScrollTimeline》：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html

不要再傻傻的手動監聽滾動事件啦

另外，上面的文檔最后有提到，如果還需要實現更高級的動畫，可以使用自定義組件的形式封裝，因為自定義組件可以實現局部刷新而不影響整體頁面性能。

初始化渲染緩存

小程序頁面的初始化分為兩個部分：邏輯層初始化及視圖層初始化。啟用初始渲染緩存，可以使視圖層不需要等待邏輯層初始化完畢，而直接提前將頁面初始 data 的渲染結果展示給用戶，這可以使得頁面對用戶可見的時間大大提前（減少白屏加載時間）

利用初始渲染緩存，可以：

• 快速展示出頁面中永遠不會變的部分，如導航欄；

• 預先展示一個骨架頁，提升用戶體驗；

• 展示自定義的加載提示；

• 提前展示廣告，等等。

詳見文檔《初始化緩存》

https://developers.weixin.qq.com/miniprogram/dev/framework/view/initial-rendering-cache.html