微信小程序性能优化与内存管理

一、启动加载优化（首屏秒开关键）

1、代码包瘦身

// 分包配置 app.json
{
  "subPackages": [
    {
      "root": "pages/sub",
      "pages": ["index"]
    }
  ],
  "preloadRule": {
    "pages/main/index": { "network": "all", "packages": ["sub"] }
  }
}

效果：主包控制在2MB内，总包≤20MB
工具：使用webpack-bundle-analyzer分析依赖

2、静态资源CDN化

<!-- 图片/视频等静态资源 -->
<image src="https://cdn.example.com/image.jpg" mode="widthFix" />

3、按需注入与懒注入

{
  "lazyCodeLoading": "requiredComponents",
  "componentFramework": "explicit"
}

二、渲染性能优化

1、长列表性能

<!-- 使用官方recycle-view组件 -->
<recycle-view batch="{{batchSetRecycleData}}"></recycle-view>

替代方案：wx.createSelectorQuery()手动计算可视区域

2、减少节点嵌套

<!-- 错误示例：过度嵌套 -->
<view><view><view><text>多层嵌套</text></view></view></view>

<!-- 正确示例：扁平化 -->
<view class="container">
  <text>直接子节点</text>
</view>

3、避免频繁setData

// 错误做法：高频更新
setInterval(() => {
  this.setData({ timer: Date.now() }) // 每秒60次
}, 16)

// 正确做法：合并更新
this.setData({
  a: 1,
  b: 2  // 一次通信完成
})

三、内存管理核心策略

1、全局数据管理

// 使用getApp()共享数据
App({
  globalData: {
    cache: new Map() // 替代频繁setData
  }
})

// 页面中访问
getApp().globalData.cache.set('key', value)

2、图片内存控制

// 监听页面卸载释放资源
Page({
  onUnload() {
    this.data.images.forEach(src => {
      wx.getImageInfo({ src }).then(res => {
        res.path = '' // 释放内存
      })
    })
  }
})

事件监听清理

Page({
  onLoad() {
    this._onResize = () => console.log('resize')
    wx.onWindowResize(this._onResize)
  },
  onUnload() {
    wx.offWindowResize(this._onResize) // 必须清理！
  }
})

四、缓存策略

缓存类型	API	适用场景	生命周期
本地缓存	wx.setStorageSync	用户偏好设置	手动清除
内存缓存	globalData	页面间共享数据	小程序关闭
临时文件	wx.downloadFile	网络图片/视频	主动清理
数据库缓存	wx.cloud.database	结构化数据	长期保留

五、高级优化技巧

1、 Worker线程处理计算

// worker.js
self.onMessage = (msg) => {
  const result = heavyCompute(msg.data)
  self.postMessage(result)
}

// 主线程
const worker = wx.createWorker('workers/worker.js')
worker.postMessage({ data: largeArray })

2、WXS脚本优化渲染

<!-- 在WXS中处理复杂计算 -->
<wxs module="utils">
  function formatPrice(price) {
    return '¥' + price.toFixed(2)
  }
  module.exports = { formatPrice }
</wxs>
<view>{{utils.formatPrice(item.price)}}</view>

3、自定义组件优化

Component({
  options: {
    pureDataPattern: /^_/ // 以下划线开头的data不参与渲染
  },
  data: {
    _internalState: 0 // 不会触发UI更新
  }
})

六、性能监控方案

1、 内置指标

wx.getPerformance().mark('customMark')
const metrics = wx.getPerformanceEntries()

2、自定义上报

const start = Date.now()
wx.request({
  url: 'api.example.com',
  success() {
    const cost = Date.now() - start
    wx.reportAnalytics('api_perf', { api: 'list', cost })
  }
})

3、内存警告处理

wx.onMemoryWarning(() => {
  clearCache()
  wx.showToast({ title: '系统内存不足' })
})

七、避坑指南

1、setData的红线

单次设置数据≤256KB
避免在滚动/动画中高频调用

2、图片加载规范

尺寸不超过实际显示2倍
优先使用WebP格式（体积小30%）

3、页面栈管理

// 避免页面栈过深
if (getCurrentPages().length >= 8) {
  wx.redirectTo() // 用重定向代替navigateTo
}