概述

大屏应用中快速走焦切换导航页时，卡顿的主要原因是每次焦点变化都触发了一次网络请求和页面重建。如果能让数据提前准备好，用户切换页面时直接读取缓存，就能消除等待时间。预加载的思路就是——不等用户切到页面才请求，而是提前把相邻页面的数据拿过来存着。

说明

预加载需要做三件事：一个缓存容器存数据、一个触发时机拉数据、一个降级逻辑兜底。触发时机选在焦点变化时，只预加载当前页前后各一到两页，不全部加载。

核心逻辑就一段：焦点移动后把旁边几页的数据提前拉回来存着，内容页展示时先查缓存，命中就直接渲染，没命中再走网络请求。预加载请求即使失败也不影响正常流程，用户无感知。

使用实践

导航栏焦点变化时触发预加载，内容页优先读缓存：

// 缓存管理
class PageCache {
  private store = new Map<number, object>()
  get(k: number) { return this.store.get(k) }
  set(k: number, v: object) {
    if (this.store.size >= 5) this.store.delete(this.store.keys().next().value)
    this.store.set(k, v)
  }
  has(k: number) { return this.store.has(k) }
}

// 预加载：焦点变化时加载相邻两页
onFocusChange(index: number) {
  [index - 2, index - 1, index + 1, index + 2].forEach(i => {
    if (i >= 0 && i < pageCount && !cache.has(i)) {
      fetchData(i).then(d => cache.set(i, d))
    }
  })
  switchPage(index)
}

// 内容页：先读缓存
aboutToAppear() {
  let data = cache.get(this.pageIndex)
  if (data) {
    this.render(data)
  } else {
    fetchData(this.pageIndex).then(d => this.render(d))
  }
}