了解更多企业以及行业的动态

立即咨询
您现在所在的位置是: 首页> 资讯> 行业动态
微信小程序微商城开发:渲染性能优化1.适当监听页面或组件的scroll事件|昱远信息系统开发
发布:2022-05-10 浏览:137

渲染性能优化1.适当监听页面或组件的滚动事件

只要用户在构建Page时传入监听器,基础库就会认为开发者需要监听页面的scoll事件。这时候用户滑动页面时,会从视图层向逻辑层高频率发送事件,有一定的通信开销。

同样,对于 ,

微信小程序微商城开发_开发微信小程序_微信小程序蓝牙开发

而其他可以通过bindscroll监听滑动事件的组件也会出现这种情况。

由于滚动事件触发的频率很高开发微信小程序,很容易被开发者误用。使用时注意:

Page({
  onPageScroll () {} // ❌不要保留空函数
})
Page({ 
  // ✅ 应直接不传入
})

微信小程序微商城开发_开发微信小程序_微信小程序蓝牙开发

2. 选择一个高性能的动画实现

开发者在开发界面动画时应该选择高性能的动画实现。

3. 使用 IntersectionObserver 监控元素暴露情况

微信小程序微商城开发_开发微信小程序_微信小程序蓝牙开发

在某些业务场景中,为了改变某些页面的状态或上报分析支付宝小程序开发 app软件开发 ,需要监控元素的暴露情况。

4.控制WXML节点的数量和级别

太大的 WXML 节点树会增加内存使用,并且需要更长的时间来重排样式,影响体验。

微信小程序微商城开发_开发微信小程序_微信小程序蓝牙开发

5.控制构建Page时传入的自定义数据量

为了方便开发开发微信小程序,开发者可以在Page构造函数传入的Object参数中添加任意函数或数据,在页面的函数内使用this进行访问。例如:

Page({
  data: {}
  userInfo: {} // 自定义数据
  currentUser: 'Wechat' // 自定义数据
  onTap() { }
  onLoad() {
    console.log(this.currentUser)
  }
})

微信小程序微商城开发_微信小程序蓝牙开发_开发微信小程序

为了保证自定义数据在不同的页面实例中也是不同的,小程序框架在创建页面时会对这部分数据(函数类型字段除外)进行深拷贝。很复杂,会带来很多开销。

// ❌ 使用复杂对象作为自定义数据
Page({
  onLoad() { }
  bigData: { /* A complex object */ },
  longList: [ /* A long complex array*/ ]
})
// ✅ 运行时手动赋值到 this。开发者可以根据需要选择进行深拷贝、浅拷贝或不拷贝。
Page({
  onLoad() {
    this.bigData = { /* A complex object */ },
    this.longList = [ /* A long complex array*/ ]
  }
})

翻译由微信翻译提供,仅供参考。如中英文版本有任何不一致和差异开发微信小程序,以中文版本为准。翻译错误。

【昱远信息系统开发定制】

本站声明: 本文章内容来源于互联网,文章内容仅供用户参考。本公司不能完全保证文章内容的准备性、时效性。如果因本文章对用户造成了任何损失或者损害,本公司将不会承担任何法律责任。如果涉及到版权问题,请提交到wikins@nbyuyuan.com

  • 立即与昱远顾问通话
    电话咨询
  • 在线咨询
  • 扫一扫添加微信
    微信咨询
  • 与昱远顾问QQ咨询
    QQ咨询