Page rendering performance optimization

uni-app, as a cross-platform development framework, has its page rendering performance directly impacting user experience. Optimization techniques, ranging from reducing DOM nesting to rational use of component lifecycles, need to be flexibly applied based on specific scenarios.

Reduce Unnecessary DOM Nesting

Excessively deep DOM structures significantly increase rendering computation. When uni-app compiles to mini-program platforms, nesting beyond a certain depth can cause a dramatic performance drop. For example:

<!-- Not recommended: 5 nested views -->
<view class="container">
  <view>
    <view>
      <view>
        <view>Actual content</view>
      </view>
    </view>
  </view>
</view>

<!-- Optimized: Flattened structure -->
<view class="container">
  <view class="content">Actual content</view>
</view>

Use CSS to replace structural nesting:

.container {
  display: flex;
  padding: 20rpx;
}
.content {
  margin: 10rpx;
  padding: 15rpx;
}

Rational Use of v-if and v-show

Dynamic display control requires scenario-specific choices:

• v-if: Large components with low toggle frequency (e.g., modals)
• v-show: Elements with high toggle frequency (e.g., tab bars)

<template>
  <!-- Suitable for v-show -->
  <view v-show="activeTab === 1">Content 1</view>
  <view v-show="activeTab === 2">Content 2</view>

  <!-- Suitable for v-if -->
  <modal v-if="showModal" />
</template>

Image Loading Optimization

Image resources are major performance bottlenecks. Pay special attention to:

1. Use appropriate image formats:
   • WebP is 30% smaller than PNG
   • Note compatibility on mini-program platforms
2. Lazy loading:

   <image 
     :src="shouldLoad ? realSrc : placeholder" 
     lazy-load
     @load="handleImageLoad"
   />
   

3. Size control:

   image {
     width: 300rpx;
     height: 300rpx;
   }
   

List Rendering Performance Improvement

Long lists must use virtual-list technology:

<template>
  <uv-virtual-list 
    :data="bigData"
    :item-size="80"
    key-field="id"
  >
    <template v-slot="{ item }">
      <view class="item">{{ item.text }}</view>
    </template>
  </uv-virtual-list>
</template>

General list optimization tips:

1. Avoid method calls in v-for

   <!-- Not recommended -->
   <view v-for="item in filterList(list)">
   
   <!-- Recommended -->
   <view v-for="item in filteredList">
   

2. Always specify :key

Style Calculation Optimization

CSS selector complexity affects rendering:

/* Not recommended: Overly deep nesting */
.page .list .item .name {}

/* Recommended: Flattened */
.item-name {
  font-size: 14px;
}

Reduce style reflows:

// Batch data updates
this.$nextTick(() => {
  this.list = new Array(100).fill().map((_,i) => ({
    id: i,
    text: `Item ${i}`
  }))
})

Component Lifecycle Control

Avoid unnecessary updates:

export default {
  onPageShow() {
    this.loadData()
  },
  // Clear timers when page hides
  onPageHide() {
    clearInterval(this.timer)
  }
}

Reduce Global Style Pollution

Use scoped styles:

<style scoped>
/* Only applies to current component */
.button {
  color: red;
}
</style>

Rational Use of Computed Properties

Avoid complex calculations in templates:

computed: {
  // Recommended: Cache calculation results
  filteredList() {
    return this.list.filter(item => item.active)
  }
}

Preload Key Resources

Leverage uni-app's preloading mechanism:

// pages.json
{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["important"]
    }
  }
}

Animation Performance Optimization

Prioritize CSS animations:

.fade-in {
  animation: fade 0.3s ease-out;
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

For complex animations, use transform:

.move-item {
  transition: transform 0.2s;
}
.move-item.active {
  transform: translateX(100px);
}

Data Update Strategy

For large datasets, use pagination:

async loadMore() {
  if (this.loading) return
  this.loading = true
  const res = await api.getList({
    page: this.page++
  })
  this.list = [...this.list, ...res.data]
  this.loading = false
}

Avoid Frequent setData

Especially important in mini-program environments:

// Not recommended
this.setData({ a: 1 })
this.setData({ b: 2 })

// Recommended: Merge updates
this.setData({ 
  a: 1,
  b: 2 
})

Use Custom Components

Modularize complex modules:

<template>
  <user-card :user="currentUser" />
</template>

<script>
import UserCard from './components/user-card.vue'
export default {
  components: { UserCard }
}
</script>

Memory Management

Promptly destroy unused objects:

onUnload() {
  this.eventBus.$off()
  this.mapInstance.destroy()
}

Subpackage Loading Strategy

Load subpackages on demand:

// Dynamically load subpackage
uni.loadSubpackage({
  name: 'submodule',
  success: () => {
    console.log('Subpackage loaded')
  }
})

Server-Side Rendering Optimization

For H5, consider SSR:

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/uni-app'
  ]
}

Performance Monitoring Tools

Use uni-app's built-in analysis tools:

# Generate build analysis report
uni build --report

Integrate custom monitoring:

// main.js
import performance from './performance'
Vue.prototype.$perf = performance