wepy開發微信小程序上存在的優化

一、預加載與欲查詢

傳統 H5 在啓動時,page1.html 只會加載 page1.html 的頁面與邏輯代碼,當 page1.html 跳轉至 page2.html 時,page1 所有的 Javascript 數據將會從內存中消失。page1 與 page2 之間的數據通信只能通過 URL 參數傳遞或者瀏覽器的 cookie,localStorge 存儲處理。

小程序在啓動時,會直接加載所有頁面邏輯代碼進內存,即便 page2 可能都不會被使用。在 page1 跳轉至 page2 時,page1 的邏輯代碼 Javascript 數據也不會從內存中消失。page2 甚至可以直接訪問 page1 中的數據。

最簡單的驗證方式就是在 page1 中加入一個 setInterval(function () {console.log(‘exist’)}, 1000)。傳統 H5 中跳轉後定時器會自動消失,小程序中跳轉後定時器仍然工作。

小程序的這種機制差異正好可以更好的實現預加載。通常情況下,我們習慣將數據拉取寫在 onLoad 事件中。但是小程序的 page1 跳轉到 page2,到 page2 的 onLoad 是存在一個 300ms ~ 400ms 的延時的。如下圖:

因爲小程序的特性,完全可以在 page1 中預先拿取數據,然後在 page2 中直接使用數據,這樣就可以避開 redirecting 的 300ms ~ 400ms 了。

預加載數據

用於 page1 主動傳遞數據給 page2,比如 page2 需要加載一份耗時很長的數據。我可以在 page1 閒時先加載好,進入 page2 時直接就可以使用。

// page1.wpy 預先加載 page2 需要的數據。

methods: {
  tap () {
    this.$redirect('./page2');
  }
},
onLoad () {
  setTimeout(() => {
    this.$preload('list', api.getBigList())
  }, 3000)
}

// page2.wpy 直接從參數中拿到 page1 中預先加載的數據
onLoad (params, data) {
  data.preload.list.then((list) => render(list));
}

預查詢數據

用於避免於 redirecting 延時,在跳轉時調用 page2 預查詢。
擴展了生命週期,添加了 onPrefetch 事件,會在 redirect 之時被主動調用。同時給 onLoad 事件添加了一個參數,用於接收預加載或者是預查詢的數據。

// page1.wpy 使用封裝的 redirect 方法跳轉時,會調用 page2 的 onPrefetch 方法
methods: {
  tap () {
    this.$redirect('./page2');
  }
}

// page2.wpy 直接從參數中拿到 onPrefetch 中返回的數據
onPrefetch () {
  return api.getBigList();
}
onLoad (params, data) {
  data.prefetch.then((list) => render(list));
}

二、避免頁面內引用多餘的組件

前端語言大多面向組件開發的,也就是說一個界面通常都是由許多組件組成的,這個觀點是沒什麼問題。但是,如果一個界面裏面引用了大量的組件,而其中有一部分在某種情況下不顯示(也就是使用過當前頁面裏的某種條件來選擇是否顯示某些組件)。這樣做,雖然說也體現的是組件化開發,但是對於性能的影響是巨大的。舉個例子:如果我們直接將頁面裏面的佈局部分全部刪除,只是簡單的將組件引進當前文件,然後放進components中,觀察編譯的代碼,wxml文件內容沒了,js文件沒有任何變化。也就是說,只要你將組件放進components中,必將會將js代碼引入。js代碼引入,便會去執行組件的生命週期函數(如果某些組件的生命週期函數中存在耗時的操作,而這個組件又不需要顯示,豈不是浪費資源影響性能)。
總結一下,wepy組件化開發並沒有問題,前提是我們要儘量去保證引進來的組件是需要顯示的,否則影響性能。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章