微信小程式如何最佳化？本篇文章總結(jié)了一些小程式中初學(xué)者可能不了解的優(yōu)化知識，分享給大家，希望對大家有幫助！

頁面跳轉(zhuǎn)優(yōu)先採用navigator元件

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

微信爬蟲抓取小程式內(nèi)容時，使用navigator 元件有利於爬蟲抓取頁面層級內(nèi)容，如果你的小程式比較注重搜尋優(yōu)化，建議優(yōu)先使用navigator 元件進行頁間跳轉(zhuǎn)【相關(guān)學(xué)習(xí)推薦：小程式開發(fā)教學(xué)】

詳見文件《小程式搜尋優(yōu)化指南》

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

#頁間跳轉(zhuǎn)，使用this.pageRouter.navigateTo 取代wx.navigateTo 是更優(yōu)的選擇

// index/index.js

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

假設(shè)頁面index/index 的js 程式碼如上圖所示。如果此時已經(jīng)跳到了一個新頁面pack/index ，然後才呼叫到上面的wxNavigate方法，跳轉(zhuǎn)的新頁面路徑將是pack/new-page ；而如果呼叫的是routerNavigate方法，跳轉(zhuǎn)的新頁面路徑仍然是index/new-page 。

換而言之， this.pageRouter 所獲得的路由器物件具有更好的基底路徑穩(wěn)定性。 (一個常見的例子是，使用者點擊按鈕跳轉(zhuǎn)下一頁，有時會因為卡頓連續(xù)點擊，有可能會重複開啟一個頁面，使用頁面路由器物件呼叫能夠避免這一情況。）

#詳見《頁面路由器物件》

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

##小程序長列表元件

在談到效能最佳化時，總是會提及如何最佳化渲染長清單內(nèi)容數(shù)據(jù)，解決的方法核心的想法就是，只渲染顯示在螢?zāi)坏臄?shù)據(jù)，基本實作就是監(jiān)聽scroll 事件，並且重新計算需要渲染的數(shù)據(jù)，不需要渲染的數(shù)據(jù)留一個空的div 佔位元素。

而小程式官方提供了一個拓展元件，專門用於渲染長列表資料場景，詳見《recycle-view》：

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

滾動驅(qū)動的動畫

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

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

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

不要再傻傻的手動監(jiān)聽滾動事件啦

#另外，

上面的文檔最後有提到，如果還需要實現(xiàn)更高級的動畫，可以使用自訂元件的形式封裝，因為自訂元件可以實現(xiàn)局部刷新而不影響整體頁面效能。

初始化渲染快取

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

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

• 快速顯示頁面中永遠不會改變的部分，如導(dǎo)覽列；

• 預(yù)先展示一個骨架頁，提升使用者體驗；

• 展示自訂的載入提示；

##提前展示廣告，等等。

詳見文件《初始化快取》

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

更多程式相關(guān)知識，請造訪：

程式設(shè)計影片

！ ！

以上是微信小程式如何優(yōu)化？你可能不知道的優(yōu)化知識大分享的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！