小程序性能优化

小程序性能优化方法

减少请求次数和数据量

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

相关推荐
游戏开发爱好者86 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
郑州光合科技余经理8 小时前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app
2501_916008898 小时前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
流***陌9 小时前
智慧寄件新体验:快递小程序如何简化日常生活
小程序
一直在学习的小白~10 小时前
小程序开发:开启定制化custom-tab-bar但不生效问题,以及使用NutUI-React Taro的安装和使用
webpack·小程序·webapp
weixin_lynhgworld12 小时前
淘宝扭蛋机小程序的社交化运营策略
大数据·小程序·扭蛋机
低代码布道师14 小时前
少儿舞蹈小程序(20):手机号登录与多角色注册
低代码·小程序
说私域14 小时前
基于开源AI智能名片的S2B2C商城小程序中搜索联想功能的优化策略研究
人工智能·小程序
2501_916007471 天前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
iOS 不上架怎么安装?多种应用分发方式解析,ipa 文件安装、企业签名、Ad Hoc 与 TestFlight 实战经验
android·macos·ios·小程序·uni-app·cocoa·iphone