Performance bottleneck troubleshooting

Performance bottlenecks are key factors affecting the smoothness and user experience of uni-app applications. Quickly identifying and resolving these issues can significantly improve application performance. Below is an analysis of common performance bottlenecks and troubleshooting methods from multiple perspectives.

Rendering Performance Optimization

List rendering is a common performance bottleneck. When dealing with large datasets, improper rendering methods can cause noticeable lag. When using v-for, always specify :key and avoid using the index as the key:

// Bad practice
<view v-for="(item, index) in bigList" :key="index">
  {{ item.name }}
</view>

// Good practice
<view v-for="item in bigList" :key="item.id">
  {{ item.name }}
</view>

For complex lists, use <scroll-view> with pagination. For extremely long lists, consider implementing a virtual scrolling solution:

// Use uni-app's easycom to import a virtual list component
<virtual-list :list="hugeList" :item-size="80">
  <template v-slot:default="{ item }">
    <list-item :data="item" />
  </template>
</virtual-list>

Lazy loading images can significantly reduce rendering pressure on the first screen:

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

JavaScript Execution Optimization

Avoid performing complex calculations in frequently triggered lifecycle hooks (e.g., onPageScroll):

// Bad example
onPageScroll(e) {
  this.heavyCalculation(e.scrollTop)
}

// Good example - use throttling
onPageScroll: throttle(function(e) {
  this.lightCalculation(e.scrollTop)
}, 200)

For large data processing, use Web Workers:

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

// In the page
const worker = new Worker('worker.js')
worker.postMessage(largeDataSet)
worker.onmessage = function(e) {
  this.processedData = e.data
}

Memory Leak Detection

Common memory leak scenarios include:

1. Unbound global event listeners
2. Uncleared timers
3. Closure references

Use Chrome DevTools' Memory panel for detection:

// Typical leak example
mounted() {
  this.timer = setInterval(() => {
    this.updateData()
  }, 1000)
},
beforeDestroy() {
  // Always clear timers
  clearInterval(this.timer)
}

Network Request Optimization

Merge API requests to reduce HTTP calls:

// Before merging
async loadData() {
  await this.getUserInfo()
  await this.getOrderList()
}

// After merging
async loadData() {
  await Promise.all([
    this.getUserInfo(),
    this.getOrderList()
  ])
}

Enable request caching:

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
}

Bundle Size Analysis

Use @dcloudio/webpack-analyzer to analyze the build output:

npm run build:mp-weixin --report

Common optimization techniques:

1. Import component libraries on demand
2. Compress static resources
3. Enable subpackage loading

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

Platform-Specific Issues

For mini-program platforms, pay special attention to:

1. Avoid frequent setData calls
2. Control the number of WXML nodes (recommended to keep under 1,000)
3. Ensure image dimensions do not exceed the display area

// Incorrect high-frequency updates
this.setData({
  'array[0].text': 'new'
})

// Correct batch updates
this.setData({
  array: newArray
})

Performance Monitoring Solution

Implement simple performance tracking:

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

// Usage example
perf.mark('pageLoad')
onLoad() {
  perf.measure('pageLoad')
}

Complex Animation Handling

Prefer CSS animations over JavaScript animations. For complex sequences, consider using CSS animation libraries:

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

When JavaScript animations are necessary, use requestAnimationFrame:

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

Advanced Long List Optimization

For extremely large datasets, use time-slicing techniques:

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()
      })
    })
  }
}

Image Loading Strategies

Dynamically adjust image quality based on network conditions:

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

Preload critical images:

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

// Preload at an appropriate time
preloadImg('/static/critical-bg.jpg')