uniapp跨端性能优化方案

一、渲染层优化

1. 精简DOM结构

<!-- 避免深层嵌套 -->
<view class="container">
  <block v-for="(item, index) in simpleList" :key="index">
    <view class="item">{{ item.name }}</view>
  </block>
</view>

1. 虚拟列表优化长列表

// 使用scroll-view实现
<scroll-view 
  scroll-y 
  :style="{height: screenHeight + 'px'}" 
  @scrolltolower="loadMore">
  <view v-for="item in visibleData" :key="item.id">
    {{ item.content }}
  </view>
</scroll-view>

// 数据分页加载
data() {
  return {
    pageSize: 20,
    currentPage: 1,
    visibleData: []
  }
},
methods: {
  async loadData() {
    const res = await uni.request({ url: `/api/data?page=${this.currentPage}` })
    this.visibleData = [...this.visibleData, ...res.data]
    this.currentPage++
  }
}

二、逻辑层优化

1. 数据冻结处理

// 冻结不需要响应式的数据
const staticData = Object.freeze({
  config: { ... },
  constants: { ... }
})

export default {
  data() {
    return {
      staticData // 不会触发响应式更新
    }
  }
}

1. 计算属性缓存

computed: {
  filteredList() {
    // 添加缓存标识
    if (this.cacheKey === this.lastCacheKey) return this.cachedResult
    
    const result = this.bigDataArray.filter(item => 
      item.status === this.activeFilter
    )
    this.cachedResult = result
    this.lastCacheKey = this.cacheKey
    return result
  }
}

三、资源优化

1. 图片懒加载

<image 
  v-for="img in imgList" 
  :src="img.placeholder" 
  :lazy-load="true" 
  :data-src="img.realSrc" 
  @load="onImageLoad"
/>

methods: {
  onImageLoad(e) {
    const realSrc = e.target.dataset.src
    e.target.src = realSrc
  }
}

1. 资源分包加载

// manifest.json
"subPackages": [
  {
    "root": "subpages/user",
    "pages": [
      { "path": "profile", "style": {} },
      { "path": "settings", "style": {} }
    ]
  }
]

四、通信优化

1. 减少setData频率

// 使用防抖合并数据更新
let updateTimer = null
function batchUpdate(data) {
  clearTimeout(updateTimer)
  updateTimer = setTimeout(() => {
    this.setData(data)
  }, 50)
}

1. 使用WXS处理视图层逻辑

<!-- 在WXS中处理复杂计算 -->
<wxs module="utils">
function formatPrice(price) {
  return '¥' + (price / 100).toFixed(2)
}
module.exports = {
  formatPrice: formatPrice
}
</wxs>

<view>{{ utils.formatPrice(item.price) }}</view>

五、启动优化

1. 预请求关键数据

// app.vue
export default {
  onLaunch() {
    this.preloadData()
  },
  methods: {
    async preloadData() {
      const [userInfo, config] = await Promise.all([
        uni.getStorage({ key: 'user' }),
        uni.request({ url: '/api/config' })
      ])
      this.globalData.user = userInfo
      this.globalData.config = config
    }
  }
}

六、平台特定优化

// 条件编译优化
function optimizeAnimation() {
  // #ifdef MP-WEIXIN
  wx.createSelectorQuery().select('.anim').step()
  // #endif
  
  // #ifdef APP-PLUS
  plus.nativeUI.animation(...)
  // #endif
}

七、性能监控

// 添加性能埋点
const perf = {
  start: 0,
  markStart() {
    this.start = Date.now()
  },
  logPerf(name) {
    const duration = Date.now() - this.start
    uni.reportAnalytics('perf_metric', {
      name,
      duration,
      platform: uni.getSystemInfoSync().platform
    })
  }
}

// 页面中使用
export default {
  onLoad() {
    perf.markStart()
  },
  onReady() {
    perf.logPerf('page_ready')
  }
}

优化效果对比表

实施建议：

1. 优先处理$白屏时间>1s$的页面
2. 对$DOM节点数>1000$的页面进行虚拟滚动改造
3. 监控$setData频率>10次/秒$的异常情况
4. 图片资源遵循$尺寸不超过显示区域2倍$原则

通过组合使用上述方案，可显著提升各端用户体验，尤其在小程序端效果更为明显。