当前位置：首页 > news >正文

uniapp跨端性能优化方案

news 2025/8/17 1:45:40

一、渲染层优化

精简DOM结构

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

虚拟列表优化长列表

// 使用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++}
}

二、逻辑层优化

数据冻结处理

// 冻结不需要响应式的数据
const staticData = Object.freeze({config: { ... },constants: { ... }
})export default {data() {return {staticData // 不会触发响应式更新}}
}

计算属性缓存

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

三、资源优化

图片懒加载

<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.srce.target.src = realSrc}
}

资源分包加载

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

四、通信优化

减少setData频率

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

使用WXS处理视图层逻辑

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

五、启动优化

预请求关键数据

// 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 = userInfothis.globalData.config = config}}
}

六、平台特定优化

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

七、性能监控

// 添加性能埋点
const perf = {start: 0,markStart() {this.start = Date.now()},logPerf(name) {const duration = Date.now() - this.startuni.reportAnalytics('perf_metric', {name,duration,platform: uni.getSystemInfoSync().platform})}
}// 页面中使用
export default {onLoad() {perf.markStart()},onReady() {perf.logPerf('page_ready')}
}