数据前置获取

数据前置获取的优势

通过上一章的 onInit，我们可以在大部分场景下，让主数据请求的时机更早，但在一些场景下，主数据的请求可能需要更早，或是主数据请求依赖其他一些需要耗时获取的数据作为参数，比如在一些商业线索类页面，商家会希望用户进入页面时立即看到线索相关信息，而不需要再等待，这种时候，我们需要一些能够更早获取数据的机制。本节，我们将介绍如何进行数据前置获取的优化手段。

数据前置获取 - 图1

什么是数据前置获取

“数据前置获取”，就是把关键页面数据获取的时机提前至前一个页面，当用户进入这些关键页面后，不再从后端请求数据，而是直接渲染从上一页面中获取到的数据。

通常情况下，用户看到一个有效页面的流程是：点击页面入口 → 进入页面 → 请求页面的数据 → 渲染请求到的数据。如果频繁访问某个页面的话，页面的数据也需要反复请求，不仅网络开销大，而且用户每次进入页面，都需要等待网络请求数据时间，用户体验较差。

通过数据前置获取，可以把关键页面的数据放在入口页面获取，页面跳转至关键页面时，将数据以页面参数的形式传输给落地页。这时候，用户看到关键页面的流程就变成了：点击页面入口 → 进入关键页面 → 渲染传输过来的数据。

不使用数据前置获取的用户体验

用户需要等待网络请求，一般约 200ms—400ms 左右：
数据前置获取 - 图2

使用数据前置获取的用户体验

关键页面直接获取前一页面拿到的数据，然后渲染数据，可以节省 200ms—400ms 的网络时间：
数据前置获取 - 图3

数据前置获取的优化方案示例

如果跳转的新页面页数据量较小（字段总数不超过 15 个、字段层级不超过 3 层），可以把数据放在跳转参数中传递到下一页：

  1. 在调用swan.navigateTo跳转到落地页时，将落地页所需的数据拼接在跳转 url 参数中。
  • JS
  1. toNextPage(pageData) {
  2.   swan.navigateTo({
  3.     url: '/pages/to/next/path?pageData=' + encodeURIComponent(pageData)
  4.   });
  5. }
  1. 新页面在onload时，从option参数中取数据，并解析、渲染。
  • JS
  1. onLoad(option) {
  2.   let pageData = option.pageData;
  3.   // 转入对应的数据处理函数中
  4.   if (pageData) {
  5.     this.setPageData(pageData);
  6.   }
  7. }

如果跳转的新页面据量较大（字段总数在 15 个以上、字段层级超过 3 层），数据就不合适放在跳转参数中传递，可以放进全局变量中：

  1. 在调用swan.navigateTo跳转到落地页前，将落地页所需的数据存在全局变量中
  • JS
  1. toNextPage(pageData) {
  2.   // 这里使用到的pageData全局变量，需要在app.js中定义
  3.   getApp().globalData.pageData = pageData;
  4.   swan.navigateTo({
  5.     url: '/pages/to/next/path'
  6.   });
  7. }
  1. 新页面在onload时，从全局变量里获取页面所需的数据
  • JS
  1. onLoad(option) {
  2.   if (getApp().globalData.pageData) {
  3.     let pageData = getApp().globalData.pageData;
  4.     // 转入对应的数据处理函数中
  5.     this.setPageData(pageData);
  6.     // 清空全局变量
  7.     getApp().globalData.pageData = null;
  8.   }
  9. }

使用注意事项

“关键页数据前置获取”，本质上是把关键页的数据获取成本转移到了入口页，所以并非所有的页面都可以使用。如要使用该手段优化某些页面，则页面必须满足如下条件：

  1. 数据较简单、数据量少（字段总数不超过 15 个、字段层级不超过 3 层）；
  2. 该页面访问的频次较高，存在退出该页面后重新进入的情况。