页面渲染性能优化

uni-app作为跨端开发框架，页面渲染性能直接影响用户体验。从减少DOM层级到合理使用组件生命周期，优化手段需要结合具体场景灵活运用。

减少不必要的DOM层级

过深的DOM结构会显著增加渲染计算量。uni-app编译到小程序平台时，嵌套层级超过一定深度会出现性能断崖式下降。例如：

<!-- 不推荐写法：嵌套5层view -->
<view class="container">
  <view>
    <view>
      <view>
        <view>实际内容</view>
      </view>
    </view>
  </view>
</view>

<!-- 优化写法：扁平化结构 -->
<view class="container">
  <view class="content">实际内容</view>
</view>

通过CSS替代结构嵌套：

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

合理使用v-if和v-show

动态显示控制需要区分场景：

• v-if：切换频率低的大组件（如弹窗）
• v-show：高频切换元素（如Tab栏）

<template>
  <!-- 适合v-show -->
  <view v-show="activeTab === 1">内容1</view>
  <view v-show="activeTab === 2">内容2</view>

  <!-- 适合v-if -->
  <modal v-if="showModal" />
</template>

图片加载优化

图片资源是性能大户，需特别注意：

1. 使用合适的图片格式：
   • WebP格式比PNG小30%
   • 小程序平台需注意兼容性
2. 按需加载：

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

3. 尺寸控制：

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

列表渲染性能提升

长列表必须使用virtual-list技术：

<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>

常规列表优化技巧：

1. 避免在v-for中使用方法调用

   <!-- 不推荐 -->
   <view v-for="item in filterList(list)">
   
   <!-- 推荐 -->
   <view v-for="item in filteredList">
   

2. 始终指定:key

样式计算优化

CSS选择器复杂度影响渲染：

/* 不推荐：层级过深 */
.page .list .item .name {}

/* 推荐：扁平化 */
.item-name {
  font-size: 14px;
}

减少样式重排：

// 批量更新数据
this.$nextTick(() => {
  this.list = new Array(100).fill().map((_,i) => ({
    id: i,
    text: `Item ${i}`
  }))
})

组件生命周期控制

避免不必要的更新：

export default {
  onPageShow() {
    this.loadData()
  },
  // 页面隐藏时清除定时器
  onPageHide() {
    clearInterval(this.timer)
  }
}

减少全局样式污染

使用scoped样式：

<style scoped>
/* 仅作用于当前组件 */
.button {
  color: red;
}
</style>

合理使用计算属性

避免模板内复杂计算：

computed: {
  // 推荐：缓存计算结果
  filteredList() {
    return this.list.filter(item => item.active)
  }
}

预加载关键资源

利用uni-app的预加载机制：

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

动画性能优化

优先使用CSS动画：

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

复杂动画使用transform：

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

数据更新策略

大数据量采用分页加载：

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
}

避免频繁setData

小程序环境特别要注意：

// 不推荐
this.setData({ a: 1 })
this.setData({ b: 2 })

// 推荐：合并更新
this.setData({ 
  a: 1,
  b: 2 
})

使用自定义组件

将复杂模块组件化：

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

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

内存管理

及时销毁无用对象：

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

分包加载策略

按需加载分包：

// 动态加载分包
uni.loadSubpackage({
  name: 'submodule',
  success: () => {
    console.log('分包加载完成')
  }
})

服务端渲染优化

对于H5端可考虑SSR：

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

性能监控工具

使用uni-app自带分析工具：

# 生成构建分析报告
uni build --report

接入自定义监控：

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