关闭

百度小程序性能优化建议:分包和合理使用setData

时间: 2018-12-18阅读: 884标签: 小程序

智能小程序的视图层使用了 san 框架,相对于其他类似 react 等 mvvm 框架来通过 virtual dom diff 来实现组件的渲染来说,san 框架是基于 data 的 diff 来进行的组件重新渲染,减少了内存的使用率与计算量,保证视图更新的高效性。所以智能小程序的视图层对于数据的变更更加敏感,感受到数据变更时则会直接触发组件的重渲染。


代码包的优化

优化大小

对于开发者来说,为了实现更加丰富的功能,所以有时会忽略对代码包大小的优化,但对于用户设备来说,需要把智能小程序所使用的代码包下载到本地空间。
所以代码包的大小会影响着用户所需的下载流量以及空间占用。另外,代码包的下载速度也会直接影响着用户的首次打开智能小程序的体验。

智能小程序的打包过程会把用户工程下所有的文件都进行打包,生成最终的用户包,所以,应该在实际开发用户包的过程中,实现业务逻辑的同时尽量去除冗余,提高复用性,及时清理不再使用的库文件和资源,来减少代码包的大小。


使用分包

可以合理的使用智能小程序的分包策略。按功能聚合、业务代码的使用频度等指标来进行代码包的拆分,当用户访问到不同包内的页面时,客户端再分别加载对应的分包。这样既能够减少智能小程序首次加载时的使用流量,也能够提升智能小程序首次加载时的速度。


图片资源优化

当使用大图片或者是长列表图片时,可能会导致客户端的内存占用上升,当占用量达到一定指标时,会触发客户端销毁智能小程序的机制。另外,大图片也可能会造成客户端的卡顿,所以建议开发者尽量减少使用大图片的资源。


合理的使用 setData

setData 是用户开发中经常使用的接口,对于手机百度智能小程序而言,使用不当也是极易引起性能问题的接口。
为了使大家更好的理解 setData 的错误用法,首先先介绍一下其背后的工作原理。


setData 的工作原理

智能小程序的逻辑层与视图层分属于不同的运行环境,相互之间不具备直接数据共享通道,他们之间的数据传递是通过客户端的消息事件派发来实现,所以到达视图层的 object 对象并非原指针,而是数据的复制版本。两者数据也并非完全同步,而是在数据未到达视图层之前,逻辑层的数据会领先于视图层。

智能小程序的视图层使用了 san 框架,相对于其他类似 react 等 mvvm 框架来通过 virtual dom diff 来实现组件的渲染来说,san 框架是基于 data 的 diff 来进行的组件重新渲染,减少了内存的使用率与计算量,保证视图更新的高效性。所以智能小程序的视图层对于数据的变更更加敏感,感受到数据变更时则会直接触发组件的重渲染。


常见不合理的使用 case

下面列举在开发者开发的过程中会常见的使用 setData 不当的场景。

1. setData 数据粒度划分不够

常见场景:开发者仅改变对象中某个属性的值,setData 的数据却是整个对象
例如:假设 person 的模型为

{
	name:'swan',
	age:'20',
	sex:'man',
	getName:fn,
	……
}

错误写法:

//code from http://caibaojian.com/baiduapp-optimization.html
let person = this.getData('person');
person.age = 30;
this.setData('person',person);

正确写法:

this.setData('person.age',30);

此时,若逻辑层直接向视图层传递更新整个 person ,那么首先传输的数据量会成倍增长,其次,视图层中所有使用了 person 中任何属性的组件均重新渲染。
好在逻辑层对于此处进行了优化,在逻辑层先进行数据对比,自动将 setData(‘person’,person) 补全为 setData(‘person.age’,30)。
但上述写法也依旧使逻辑层增加处理过程,并且对于特殊的数据类型,如 array ,逻辑层的 diff 比较无法精准到具体 key 。
例如:假设 numbers 模型为 [1,2,3,4,5]
错误写法:

let numbers = this.getData('numbers');
numbers.unshift();
this.setData('numbers',numbers);

正确写法:

this.unshiftData(array);

所以在开发过程中,开发者应正确划分 setData 的数据粒度,以优化程序性能。

2. 频繁的 setData

原因同上,频繁的 setData,常见场景如 setInterval ,或其他循环执行。
上述操作逻辑层每次均会通过客户端传递数据到视图层,消耗用户的网络流量与增加传输次数。并且,视图层也会频繁的重渲染组件,造成用户视觉卡顿等不好的体验。

3. 智能小程序页面不可见后进行 setData

在页面进入到后台状态时,程序后台的 setData 会占用前台页面的执行资源,且后台页面的渲染对用户并不可见,导致资源浪费。所以在页面隐藏时,不应该继续进行 setData 。


 原文链接:http://caibaojian.com/baiduapp-optimization.html  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1638

关闭

mpvue开发微信小程序基础知识

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。

微信小程序WXS之谜

微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

小程序支持JSX语法的新思路

React社区一直在探寻使用React语法开发小程序的方式,其中比较著名的项目有Taro,nanachi。而使用React语法开发小程序的难点主要就是在JSX语法上,JSX本质上是JS,相比于小程序静态模版来说太灵活。

小程序之生成朋友圈图片

微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。

微信小程序页面返回按键控制

今天在开发公司内部的小程序项目时,遇到了一个问题,就是控制手机返回按键的问题,本来我以为很快就可以解决的,没想到最后我用了快一天的时间,才给做好,而且还不是我最初想到的方法。

小程序框架_推荐多款高质量的小程序框架组件

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。 如: mpvue、Tina.js、Taro、wepy、weweb、touchwx

在微信小程序中保存网络图片

在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。 但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口。

微信小程序UI组件、实用库、开发工具、服务端、Demo整理分享

小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等

小程序自定义tabbar占位问题

针对于小程序中自定义tabbar问题,有多种自定义方式。其中之一就是需要将原先系统自带的tabbar隐藏,调用,就是在小程序底部原先放置tabbar的内容会出现空白,仍然会出现占位问题。

微信小程序与h5的区别

小程序面世以来,尽管微信团队做了很多关于小程序的普及功课,但是还是有很多人不太理解,最多的误解就是把它等同于H5。小程序由于刚推出来时开放的能力十分有限,所以在功能展示上会让普通用户感觉和H5一样,并没有什么特别之处

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!