小程序性能优化

小程序性能优化方法

减少请求次数和数据量

使用缓存技术减少重复请求，例如将频繁使用的数据存储在本地缓存中。通过wx.setStorageSync和wx.getStorageSync实现本地数据缓存，避免重复请求服务器。

javascript 复制代码

// 缓存数据
const data = { key: 'value' };
wx.setStorageSync('cacheKey', data);

// 读取缓存
const cachedData = wx.getStorageSync('cacheKey');
if (cachedData) {
  // 使用缓存数据
} else {
  // 发起请求获取数据
}

合并请求使用接口聚合，减少多次请求的开销。例如将多个小接口合并为一个接口，减少网络请求次数。

优化图片资源

压缩图片并使用合适的格式，例如使用WebP格式替代PNG或JPG。通过wx.compressImageAPI压缩图片，减少资源体积。

javascript 复制代码

wx.compressImage({
  src: 'originalImagePath',
  quality: 80,
  success(res) {
    console.log('压缩后的图片路径', res.tempFilePath);
  }
});

懒加载技术延迟加载非可视区域的图片，减少初始加载时间。通过监听页面滚动动态加载图片。

javascript 复制代码

Page({
  data: {
    showImage: false
  },
  onPageScroll(e) {
    if (e.scrollTop > 200 && !this.data.showImage) {
      this.setData({ showImage: true });
    }
  }
});

减少渲染节点数量

使用虚拟列表技术优化长列表渲染，例如通过wx.createSelectorQuery获取节点信息，动态渲染可见区域内容。

javascript 复制代码

Page({
  data: {
    list: [], // 大数据列表
    visibleData: [] // 当前可见数据
  },
  updateVisibleData(scrollTop) {
    const startIdx = Math.floor(scrollTop / ITEM_HEIGHT);
    const endIdx = startIdx + VISIBLE_COUNT;
    this.setData({
      visibleData: this.data.list.slice(startIdx, endIdx)
    });
  }
});

避免不必要的节点嵌套，简化WXML结构。例如减少多余的view标签嵌套，使用更简洁的布局方式。

合理使用setData

避免频繁调用setData，合并多次更新为一次。例如使用防抖函数限制setData调用频率。

javascript 复制代码

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

Page({
  handleInput: debounce(function(e) {
    this.setData({ inputValue: e.detail.value });
  }, 300)
});

仅更新变化的数据字段，减少数据传输量。例如只更新需要改变的部分数据，而不是整个对象。

javascript 复制代码

// 不推荐
this.setData({ userInfo: newUserInfo });

// 推荐
this.setData({ 'userInfo.name': newName });

预加载和预请求

利用页面生命周期提前加载数据，例如在onLoad阶段预加载下一页数据。

javascript 复制代码

Page({
  onLoad() {
    this.preloadNextPageData();
  },
  preloadNextPageData() {
    // 提前请求下一页数据
  }
});

使用wx.downloadFile预下载资源，减少用户等待时间。例如提前下载可能用到的图片或文件。

javascript 复制代码

wx.downloadFile({
  url: 'https://example.com/image.jpg',
  success(res) {
    // 保存文件路径供后续使用
  }
});

代码分包加载

使用分包加载机制将非核心功能分离，减少主包体积。在app.json中配置分包信息。

json 复制代码

{
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }
  ]
}

按需注入代码，减少初始加载时间。在页面配置中设置"lazyCodeLoading": "requiredComponents"。

json 复制代码

{
  "lazyCodeLoading": "requiredComponents"
}

使用自定义组件

将重复使用的UI封装为自定义组件，减少冗余代码。例如创建通用按钮组件。

javascript 复制代码

// components/my-button/index.js
Component({
  properties: {
    text: String
  },
  methods: {
    onTap() {
      this.triggerEvent('click');
    }
  }
});

组件隔离样式避免全局污染，例如使用externalClasses定义外部样式类。

javascript 复制代码

Component({
  externalClasses: ['custom-class']
});

性能监控和分析

使用wx.getPerformanceAPI获取性能数据，监控页面加载时间。

javascript 复制代码

const performance = wx.getPerformance();
const observer = performance.createObserver((entryList) => {
  const entries = entryList.getEntries();
  entries.forEach(entry => {
    console.log(entry.name, entry.duration);
  });
});
observer.observe({ entryTypes: ['render', 'script', 'navigation'] });

通过开发者工具的Audits面板分析性能问题，识别优化机会。定期检查性能评分和建议。