小程序性能优化-预加载

在微信小程序中，数据预加载是提升用户体验的重要优化手段。以下是处理数据预加载的完整方案：

一、预加载的适用场景

跳转页面前的数据准备
如从列表页进入详情页前，提前加载详情数据
首屏加载后的空闲时间
在首页加载完成后，预加载其他高频页面数据
多步骤流程的后续步骤
如电商下单流程中，提前加载支付页面所需数据

二、核心实现方案

1. 全局预加载（App级别）

javascript 复制代码

// app.js
App({
  globalData: {
    preloadData: {} // 全局缓存池
  },

  // 预加载方法
  preload: function(url, params) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://api.example.com/' + url,
        data: params,
        success: (res) => {
          this.globalData.preloadData[url] = res.data;
          resolve(res);
        },
        fail: reject
      })
    })
  }
})

2. 页面跳转时预加载

javascript 复制代码

// 列表页 list.js
Page({
  onItemTap(e) {
    const id = e.currentTarget.dataset.id;
    
    // 在跳转前发起预加载
    getApp().preload('detail', { id })
    
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    })
  }
})

// 详情页 detail.js
Page({
  onLoad(options) {
    const id = options.id;
    const cachedData = getApp().globalData.preloadData[`detail?id=${id}`];
    
    if(cachedData) {
      this.setData({ detail: cachedData }) // 使用缓存数据
      delete getApp().globalData.preloadData[`detail?id=${id}`] // 清除缓存
    } else {
      this.fetchData(id) // 常规请求
    }
  }
})

三、高级优化策略

1. 智能预加载（基于用户行为预测）

javascript 复制代码

// 监控用户停留时间预测跳转
let timer = null;

Page({
  onItemHover() {
    timer = setTimeout(() => {
      this.preloadDetailData()
    }, 800) // 悬停800ms触发预加载
  },

  onItemLeave() {
    clearTimeout(timer)
  }
})

2. 数据版本控制

javascript 复制代码

// 带版本号的缓存
const cacheWithVersion = {
  key: 'detail_1.2.3', // 版本号随API版本更新
  data: {...},
  expire: Date.now() + 3600000 // 1小时过期
}

3. 请求优先级管理

javascript 复制代码

class RequestQueue {
  constructor() {
    this.highPriorityQueue = []
    this.lowPriorityQueue = []
  }

  add(request, priority = 'low') {
    if(priority === 'high') {
      this.highPriorityQueue.push(request)
    } else {
      this.lowPriorityQueue.push(request)
    }
    this.process()
  }
}

四、性能优化技巧

分块预加载

javascript 复制代码

// 分批加载避免卡顿
function chunkPreload(list) {
  const chunkSize = 3;
  for(let i=0; i<list.length; i+=chunkSize) {
    setTimeout(() => {
      loadChunk(list.slice(i, i+chunkSize))
    }, i*200)
  }
}

缓存淘汰策略

javascript 复制代码

// LRU缓存控制
const MAX_CACHE_SIZE = 10;
function addToCache(key, data) {
  const keys = Object.keys(getApp().globalData.preloadData);
  if(keys.length >= MAX_CACHE_SIZE) {
    delete getApp().globalData.preloadData[keys[0]];
  }
  getApp().globalData.preloadData[key] = data;
}

预加载状态管理

javascript 复制代码

// 使用全局状态跟踪
const preloadStatus = new Map();

function startPreload(url) {
  preloadStatus.set(url, 'loading');
  wx.request({
    // ...
    success() {
      preloadStatus.set(url, 'loaded')
    }
  })
}

五、调试与监控

1. 性能监控

javascript 复制代码

// 自定义性能打点
const perf = {
  start: {},
  marks: {},

  mark(name) {
    this.start[name] = Date.now()
  },

  measure(name) {
    this.marks[name] = Date.now() - this.start[name]
    wx.reportAnalytics('preload_perf', this.marks)
  }
}

2. 缓存命中率统计

javascript 复制代码

let stats = {
  total: 0,
  hit: 0
}

function getCache(key) {
  stats.total++;
  if(cache[key]) {
    stats.hit++;
    return cache[key]
  }
  return null
}

六、注意事项

流量控制
- 移动网络下限制预加载数据量
- 提供用户可关闭预加载的配置项
数据一致性
- 对实时性要求高的数据（如库存）禁用预加载
- 设置合理的缓存过期时间

错误处理

javascript 复制代码

function safePreload(url) {
  return getApp().preload(url)
    .catch(err => {
      wx.reportMonitor('preload_failed', 1)
      return Promise.resolve() // 防止阻断流程
    })
}

七、推荐工具

自定义预加载管理器

javascript 复制代码

class PreloadManager {
  constructor() {
    this.queue = []
    this.maxConcurrent = 2 // 最大并发数
  }

  add(task) {
    this.queue.push(task)
    this.run()
  }

  run() {
    while(this.running < this.maxConcurrent && this.queue.length) {
      const task = this.queue.shift()
      this.running++
      task().finally(() => {
        this.running--
        this.run()
      })
    }
  }
}

使用 Worker 处理复杂数据

javascript 复制代码

// 在worker中处理大数据
const worker = wx.createWorker('workers/preload.js')
worker.postMessage({
  type: 'preprocess',
  data: rawData
})

通过合理使用这些技术方案，可以显著提升小程序的流畅度（建议结合具体业务场景调整策略）。在实际项目中建议先通过 wx.getPerformance() API 分析性能瓶颈，再有针对性地实施预加载策略。