小程序性能优化

小程序性能优化方法

减少请求次数和数据量

使用缓存技术减少重复请求,例如将频繁使用的数据存储在本地缓存中。通过wx.setStorageSyncwx.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面板分析性能问题,识别优化机会。定期检查性能评分和建议。

相关推荐
2501_915921431 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
小小王app小程序开发3 小时前
盲盒小程序核心玩法深度解析:一番赏、无限赏及商业逻辑拆解
小程序
skywalk81633 小时前
用Trae自动生成一个围棋小程序
人工智能·小程序
從南走到北4 小时前
西陆房产系统小程序
微信·微信小程序·小程序
future_studio7 小时前
聊聊 Unity(小白专享、C# 小程序 之 自动更新)
unity·小程序·c#
黑马源码库miui520867 小时前
同城派送小程序
微信小程序·小程序
攻城狮-申8 小时前
小程序uview actionSheet 内容过多高度设置
小程序·uview·hb
ybb_ymm9 小时前
从需求开始至架构设计的适用于商家及小吃摊的点餐小程序
小程序·apache
2501_9151063210 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone