导语: 首先,问一个问题,当用户点击小程序后发生了什么?上图中的三个状态,我们经常遇到,它们分别对应小程序的下面三个状态:有三个点的白屏(左侧): 下载代码包的阶段没有...
首先,问一个问题,当用户点击小程序后发生了什么?
上图中的三个状态,我们经常遇到,它们分别对应小程序的下面三个状态:
有三个点的白屏(左侧): 下载代码包的阶段
没有三个点的白屏(中间): 业务代码注入和渲染的阶段
加载中(右边): 业务代码中异步请求数据
总的来说,小程序呈现到用户面前,实际上经历了下面两个阶段:
下面具体介绍这两个阶段:
这步是微信做的。微信会在用户打开小程序之前就已经准备好环境,用户点击小程序入口后,直接下载小程序的代码包即可。
小程序代码包里面的代码,不是小程序的源代码,而是编译、压缩、打包之后的代码包。
下图中,左侧的“ 预加载 ”对应的是运行环境的预加载,右侧的“小程序启动” 对应的是下载代码包启动小程序。
小程序提供的运行环境,分为逻辑层(AppService)和 视图层(webView),逻辑层是执行javascript的地方,视图层是渲染页面的地方。当小程序的代码包下载完毕后,业务代码分别注入逻辑层和渲染层。
提升加载性能的最最最关键性一点是,控制包的大小,这个也是微信官方的说法。
提升体验最直接的方法是 控制小程序包的大小 ,基本上可以说,1M的代码包,下载耗时1秒左右。
除了上面讲的控制包的大小,对异步请求的优化也很重要。
每调用一次setData, 都是逻辑层向渲染层的一次通讯,这个通信还不是直接传给webView, 而是通过走了native层,通讯的开销很大。
渲染层收到通讯后,还需要重新渲染出来,所以,emmm, 一次setData带来两次开销:通信的开销 + webview更新的开销。
在数据传输时,逻辑层会执行一次 JSON.stringify
来去除掉 setData
数据中不可传输的部分,之后将数据发送给视图层。同时,逻辑层还会将 setData
所设置的数据字段与 data
合并,使开发者可以用 this.data
读取到变更后的数据。
如果一个数据不能会影响渲染层,则不用放在setData里面
这个很好理解吧
在一个列表中,有 n
条数据,采用上拉加载更多的方式,假如这个时候想对其中某一个数据进行点赞操作,还能及时看到点赞的效果
此时,可以采用setData全局刷新,点赞完成之后,重新获取数据,再次进行全局重新渲染,这样做的优点是:方便,快捷!缺点是:用户体验极其不好,当用户刷量100多条数据后,重新渲染量大会出现空白期(没有渲染过来)
如果采用布局刷新,将点赞的 id
传过去,知道点的是那一条数据, 将点赞的 id
传过去,知道点的是那一条数据。
重新获取数据,查找相对应id的那条数据的下标( index
是不会改变的),用setData进行局部刷新
this.setData({
list[index] = newList[index]
})
复制代码
小程序中可能有n个页面,所有的这些页面,虽然都拥有自己的webview(渲染层), 但是却共享同一个js运行环境。也就是说,当你跳到了另外一个页面(假设是B页面),本页面(假设是A页面)的定时器等js操作仍在进行,并且不会被销毁,并且会抢占B页面的资源。
在h5的环境中,当我们跳转到其他页面,老页面的js环境会被自动销毁,定时器什么都被销毁掉了,因此我们不需要关心老页面中,还有哪些js代码可能还会执行。但是在小程序中,我们必须手动的“清理”掉这样的代码。
pageScroll 事件,也是一次通讯,是webview层向js逻辑层的通讯。这次通讯也是开销较大,如果考虑到这个事件被频繁的调用,回调函数如果有复杂的setData的话,emmmmm, 性能就会很差了。
在h5 中的环境中,为了实现懒加载、下拉加载,我们 不得不 去获取节点的位置。
为啥说 不得不 ,是因为我们本可以用新的api ——intersectionObject去轻松实现(google等主流浏览器都已经支持了),但是微信的内置X5浏览器很遗憾的不支持。
没想到,在小程序的环境中,微信竟然良心发现,支持intersectionObject api, 因此获取节点的信息,尽量还是用这api 吧。
自定义组件的更新只在组件内部进行,不受页面其他不能分内容的影响;比如一些运营活动的定时模块可以单独抽出来,做成一个定时组件,定时组件的更新并不会影响页面上其他元素的更新;各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用
相比于上面的优化策略,最重要的是找出小程序中的性能瓶颈。在自己的优化实践中,遇到了下面的问题:
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。