避免高耗性能操作
更新时间:
在蓝河应用上,一些比较消耗性能的操作是需要开发时记住的,下面将会介绍这些操作。
避免使用后代选择器
推荐级别:强烈
后代选择器在 web 开发中可以非常好地避免样式污染。但是在蓝河应用中页面和组件天生就具有样式隔离的能力,不使用后代选择器可以更快的渲染页面。
反例
.list .item {
color: red;
}
复制代码
正例
.item {
color: red;
}
复制代码
精简打印日志
推荐级别:强烈
非必须不建议打日志,如必要打印,日志的内容尽量简短。
反例
export default {
startWorkout(sportInfo) {
console.log(`sportInfo = ${JSON.stringfiy(sportInfo)}`)
},
}
复制代码
正例
export default {
startWorkout(sportInfo) {
console.log(`sportInfo.id = ${sportInfo.id}`)
},
}
复制代码
减少对大对象使用 JSON.parse、JSON.stringify
推荐级别:强烈
在开发中,注意避免对大的 JS 对象使用 JSON.parse、JSON.stringify,这会影响性能。建议在服务端处理完数据后再返回给 js 应用
减少使用 border-radius
推荐级别:建议
border-radius 为耗性能属性,非必须不使用组件圆角,在设计层面上避免出现圆角,如有图片出现圆角要首先考虑使用切图实现。
避免后台渲染指令堆积
如果您的应用常驻后台,那么后台刷新 UI 容易造成渲染指令堆积,影响性能,尽量避免这些行为。如果 Page 有接收 event 后刷新 UI 的行为,或者有类似行为可以使用暂存数据的方式避免后台刷新 UI
// 临时变量暂存后台刷新数据
let tempData
export default {
data: {
bgData: [1, 2],
showing: false,
},
onInit() {
const evtId = event.subscribe({
eventName: 'new_data',
callback: (res) => {
if (!this.showing) {
tempData = res.data
} else {
this.bgData = res.data
}
},
})
},
onShow() {
this.showing = true
if (tempData) {
this.bgData = tempData
}
},
onHide() {
this.showing = false
},
}
复制代码