数据前置获取

# 数据前置获取的优势

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

# 什么是数据前置获取

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

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

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

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

用户需要等待网络请求,一般约 200ms--400ms 左右:

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

关键页面直接获取前一页面拿到的数据,然后渲染数据,可以节省 200ms--400ms 的网络时间:

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

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

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

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

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

# 使用注意事项

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

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