Memory management and leak prevention

Fundamentals of Memory Management

As a cross-platform framework, uni-app's memory management directly impacts application performance. JavaScript employs automatic garbage collection, but improper operations can still lead to memory leaks. Common memory types include:

• Heap memory: Dynamically allocated, stores objects and closures
• Stack memory: Stores primitive types and function call frames
• Global memory: Lifecycle matches the application

// Typical memory allocation example
function createLargeObject() {
  return new Array(1000000).fill({data: 'memory test'}) // Heap memory allocation
}

let globalCache = {} // Global memory

Common Memory Leak Scenarios

Uncleared Global Variables

// Bad example
function init() {
  leakedData = new Array(500000) // Implicit global variable
}

// Correct approach
function safeInit() {
  const localData = new Array(500000)
  // Manually release after use
  return () => { localData.length = 0 }
}

Unremoved Event Listeners

// uni-app page example
export default {
  mounted() {
    uni.onWindowResize(this.handleResize)
  },
  beforeDestroy() {
    uni.offWindowResize(this.handleResize) // Must be manually removed
  }
}

Uncleared Timers

let timer = null

export default {
  methods: {
    startPolling() {
      timer = setInterval(() => {
        this.fetchData()
      }, 5000)
    },
    stopPolling() {
      clearInterval(timer) // Must be called when the page is destroyed
      timer = null
    }
  }
}

uni-app Specific Optimization Strategies

Image Resource Management

// Optimized image loading
<image :src="largeImage" mode="aspectFit" lazy-load></image>

// Manual release
this.largeImage = null
uni.releaseImage(largeImage) // Platform-specific API

Long List Handling

<template>
  <scroll-view 
    :scroll-top="scrollTop"
    @scroll="handleScroll"
  >
    <view v-for="item in visibleItems" :key="item.id">
      {{ item.content }}
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      allItems: [], // Original data
      visibleItems: [], // Visible area data
      scrollTop: 0
    }
  },
  methods: {
    handleScroll(e) {
      // Dynamically calculate visible area data
      const startIdx = Math.floor(e.detail.scrollTop / ITEM_HEIGHT)
      this.visibleItems = this.allItems.slice(startIdx, startIdx + VISIBLE_COUNT)
    }
  }
}
</script>

Memory Analysis Tool Usage

Chrome DevTools

1. Connect to debugging via uni.connectDevTools()
2. Perform heap snapshots in the Memory panel
3. Compare multiple snapshots to find leaked objects

// Manually trigger memory snapshot
if(process.env.NODE_ENV === 'development') {
  window.takeHeapSnapshot = () => {
    console.profile('Heap Snapshot')
    console.profileEnd()
  }
}

uni-app Performance Panel

uni.getPerformance().mark('memory_check_start')
// Execute suspicious code
uni.getPerformance().measure('memory_usage', 'memory_check_start')

Advanced Techniques in Practice

WebWorker for Intensive Tasks

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

// Main thread
const worker = new Worker('worker.js')
worker.postMessage(largeDataSet)
worker.onmessage = (e) => {
  updateUI(e.data)
  worker.terminate() // Terminate immediately after use
}

Object Pool Technique

class ObjectPool {
  constructor(createFn) {
    this.pool = []
    this.createFn = createFn
  }

  get() {
    return this.pool.pop() || this.createFn()
  }

  release(obj) {
    obj.reset && obj.reset() // Clear object state
    this.pool.push(obj)
  }
}

// Usage example
const imagePool = new ObjectPool(() => new Image())
const img = imagePool.get()
imagePool.release(img) // Instead of direct destruction

Platform-Specific Handling

WeChat Mini Program Special Handling

// Manually trigger garbage collection (only effective in development version)
if(wx.triggerGC) {
  wx.triggerGC()
}

// Clean temporary files
wx.getFileSystemManager().unlink({
  filePath: tempFilePath,
  success: () => console.log('Temporary file cleaned')
})

Android Platform Optimization

// Native plugin example (requires uni-app native plugin development)
public class MemoryOptimizer {
  public static void clearWebviewCache() {
    WebView webView = new WebView(context);
    webView.clearCache(true);
    webView.destroy();
  }
}