避免高耗性能操作

更新时间:

在蓝河应用上,一些比较消耗性能的操作是需要开发时记住的,下面将会介绍这些操作。

避免使用后代选择器

推荐级别:强烈

后代选择器在 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
  },
}
复制代码
以上内容对您是否有帮助?
  • 毫无帮助
  • 帮助不大
  • 一般
  • 很好
  • 非常好
意见反馈