性能瓶颈排查

性能瓶颈是影响uni-app应用流畅度和用户体验的关键因素。快速定位和解决这些问题，可以显著提升应用性能。下面从多个角度分析常见的性能瓶颈及其排查方法。

渲染性能优化

列表渲染是常见的性能瓶颈点。当列表数据量较大时，不当的渲染方式会导致明显卡顿。使用v-for时应始终指定:key，避免使用索引作为key：

// 错误示范
<view v-for="(item, index) in bigList" :key="index">
  {{ item.name }}
</view>

// 正确做法
<view v-for="item in bigList" :key="item.id">
  {{ item.name }}
</view>

复杂列表建议使用<scroll-view>配合分页加载。对于超长列表，可引入虚拟滚动方案：

// 使用uni-app的easycom引入虚拟列表组件
<virtual-list :list="hugeList" :item-size="80">
  <template v-slot:default="{ item }">
    <list-item :data="item" />
  </template>
</virtual-list>

图片懒加载能显著减少首屏渲染压力：

<image lazy-load :src="imgUrl" />

JavaScript执行优化

避免在频繁触发的生命周期（如onPageScroll）中执行复杂运算：

// 反例
onPageScroll(e) {
  this.heavyCalculation(e.scrollTop)
}

// 正解 - 使用节流
onPageScroll: throttle(function(e) {
  this.lightCalculation(e.scrollTop)
}, 200)

大数据量处理应使用Web Worker：

// worker.js
self.onmessage = function(e) {
  const result = heavyDataProcessing(e.data)
  postMessage(result)
}

// 页面中
const worker = new Worker('worker.js')
worker.postMessage(largeDataSet)
worker.onmessage = function(e) {
  this.processedData = e.data
}

内存泄漏排查

常见内存泄漏场景包括：

1. 未解绑的全局事件监听
2. 未清除的定时器
3. 闭包引用

使用Chrome DevTools的Memory面板进行检测：

// 典型泄漏示例
mounted() {
  this.timer = setInterval(() => {
    this.updateData()
  }, 1000)
},
beforeDestroy() {
  // 必须清除定时器
  clearInterval(this.timer)
}

网络请求优化

合并接口请求，减少HTTP请求次数：

// 合并前
async loadData() {
  await this.getUserInfo()
  await this.getOrderList()
}

// 合并后
async loadData() {
  await Promise.all([
    this.getUserInfo(),
    this.getOrderList()
  ])
}

启用请求缓存：

const cache = new Map()
async function cachedRequest(url) {
  if (cache.has(url)) {
    return cache.get(url)
  }
  const res = await uni.request({ url })
  cache.set(url, res)
  return res
}

打包体积分析

使用@dcloudio/webpack-analyzer分析产物：

npm run build:mp-weixin --report

常见优化手段：

1. 按需引入组件库
2. 压缩静态资源
3. 启用分包加载

// manifest.json
{
  "mp-weixin": {
    "optimization": {
      "subPackages": true
    }
  }
}

平台特定问题

小程序平台需特别注意：

1. 避免频繁setData
2. 控制WXML节点数量（建议少于1000）
3. 图片尺寸不超过显示区域

// 错误的高频更新
this.setData({
  'array[0].text': 'new'
})

// 正确的批量更新
this.setData({
  array: newArray
})

性能监控方案

实现简单的性能打点：

const perf = {
  start: {},
  mark(name) {
    this.start[name] = Date.now()
  },
  measure(name) {
    const duration = Date.now() - this.start[name]
    console.log(`${name}耗时: ${duration}ms`)
    uni.reportAnalytics('performance', {
      name,
      duration
    })
  }
}

// 使用示例
perf.mark('pageLoad')
onLoad() {
  perf.measure('pageLoad')
}

复杂动画处理

CSS动画优先于JavaScript动画。对于复杂序列，考虑使用CSS动画库：

<view class="animate__animated animate__bounce"></view>

必须使用JS动画时，采用requestAnimationFrame：

function animate() {
  element.style.transform = `translateX(${position}px)`
  position += 1
  if (position < 100) {
    requestAnimationFrame(animate)
  }
}

长列表优化进阶

对于超大数据集，可采用时间分片技术：

async function renderBigList(list) {
  for (let i = 0; i < list.length; i += 50) {
    await new Promise(resolve => {
      requestIdleCallback(() => {
        appendItems(list.slice(i, i + 50))
        resolve()
      })
    })
  }
}

图片加载策略

根据网络状况动态调整图片质量：

const imgQuality = navigator.connection.effectiveType === '4g' ? 80 : 50
this.imgUrl = `${baseUrl}?quality=${imgQuality}`

预加载关键图片：

const preloadImg = url => {
  const img = new Image()
  img.src = url
}

// 在合适的时机预加载
preloadImg('/static/critical-bg.jpg')