关于⼩程序优化的⼀些建议（⼩结）
setData
setData 是⼩程序开发中使⽤最频繁的接⼝，也是最容易引发性能问题的接⼝。在介绍常见的错误⽤法前，先简单介绍⼀下setData 背后的⼯作原理。
⼯作原理
⼩程序的视图层⽬前使⽤ WebView 作为渲染载体，⽽逻辑层是由独⽴的 JavascriptCore 作为运⾏环境。在架构
上，WebView 和 JavascriptCore 都是独⽴的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的evaluateJavascript 所实现。即⽤户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成⼀份 JS 脚本，再通过执⾏ JS 脚本的形式传递到两边独⽴环境。
⽽ evaluateJavascript 的执⾏会受很多⽅⾯的影响，数据到达视图层并不是实时的。
常见的 setData 操作错误
1. 频繁的去 setData
写文章的小程序在我们分析过的⼀些案例⾥，部分⼩程序会⾮常频繁（毫秒级）的去setData，其导致了两个后果：
Android 下⽤户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程⼀直在编译执⾏渲染，未能及时将⽤户操作事件传递到逻辑层，逻辑层亦⽆法及时将操作处理结果及时传递到视图层；
渲染有出现延时，由于 WebView 的 JS 线程⼀直处于忙碌状态，逻辑层到页⾯层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了⼏百毫秒，渲染的结果并不实时；
2. 每次 setData 都传递⼤量新数据
由setData的底层实现可知，我们的数据传输实际是⼀次 evaluateJavascript 脚本过程，当数据量过⼤时会增加脚本的编译执⾏时间，占⽤ WebView JS 线程，
3. 后台态页⾯进⾏ setData
当页⾯进⼊后台态（⽤户不可见），不应该继续去进⾏setData，后台态页⾯的渲染⽤户是⽆法感受的，另外后台态页⾯去setData也会抢占前台页⾯的执⾏。
图⽚资源
⽬前图⽚资源的主要性能问题在于⼤图⽚和长列表图⽚上，这两种情况都有可能导致 iOS 客户端内存占⽤上升，从⽽触发系统回收⼩程序页⾯。
图⽚对内存的影响
图⽚对页⾯切换的影响
除了内存问题外，⼤图⽚也会造成页⾯切换的卡顿。我们分析过的案例中，有⼀部分⼩程序会在页⾯中引⽤⼤图⽚，在页⾯后退切换中会出现掉帧卡顿的情况。
当前我们建议开发者尽量减少使⽤⼤图⽚资源。
代码包⼤⼩的优化
⼩程序⼀开始时代码包限制为 1MB，但我们收到了很多反馈说代码包⼤⼩不够⽤，经过评估后我们放开了这个限制，增加到2MB 。代码包上限的增加对于开发者来说，能够实现更丰富的功能，但对于⽤户来说，也增加了下载流量和本地空间的占⽤。
开发者在实现业务逻辑同时也有必要尽量减少代码包的⼤⼩，因为代码包⼤⼩直接影响到下载速度，从⽽影响⽤户的⾸次打开体验。除了代码⾃⾝的重构优化外，还可以从这两⽅⾯着⼿优化代码⼤⼩：
控制代码包内图⽚资源
⼩程序代码包经过编译后，会放在的 CDN 上供⽤户下载，CDN 开启了 GZIP 压缩，所以⽤户下载的是压缩后的 GZIP 包，其⼤⼩⽐代码包原体积会更⼩。但我们分析数据发现，不同⼩程序之间的代码包压缩⽐差异也挺⼤的，部分可以达到30%，⽽部分只有 80%，⽽造成这部分差异的⼀个原因，就是图⽚资源的使⽤。GZIP 对基于⽂本资源的压缩效果最好，在压缩较⼤⽂件时往往可⾼达 70%-80% 的压缩率，⽽如果对已经压缩的资源（例如⼤多数的图⽚格式）则效果甚微。
及时清理没有使⽤到的代码和资源
在⽇常开发的时候，我们可能引⼊了⼀些新的库⽂件，⽽过了⼀段时间后，由于各种原因⼜不再使⽤这个库了，我们常常会只是去掉了代码⾥的引⽤，⽽忘记删掉这类库⽂件了。⽬前⼩程序打包是会将⼯程下所有⽂件都打⼊代码包内，也就是说，这些没有被实际使⽤到的库⽂件和资源也会被打⼊到代码包⾥，从⽽影响到整体代码包的⼤⼩。
WXS 模块
每个 wxs 模块均有⼀个内置的 module 对象。
直接在wxml中引⼊，可以将写需要转化数据的写进去，防⽌给setData加负担
使⽤了过⼤的 WXML 节点数⽬
⼀个太⼤的WXML节点树会增加内存的使⽤，样式重排时间也会更长，建议⼀个页⾯使⽤少于1000个WXML的节点，节点树深度少于30层，⼦节点数不⼤于60
⼩程序有并发限制
所有为了保险起见，采⽤公共⽅法和组件
编写公共⽅法和组件，可以避免重复造轮⼦。
1.公共埋点⽅法
2.各种处理js的⽅法（转https，throttle，formatTime等）
3.公共组件（iphonex兼容组件，倒计时组件等）
需要写个请求队列，如果并发量⼤于10，则等待请求。
埋点的坑
埋点⽤公共⽅法，页⾯曝光pv埋点放⼊onshow⽣命周期中更加准确。
setData注意点
1. 频繁的去 setData
存在将未绑定在 WXML 的变量都不需要传⼊ setData。
2. 每次 setData 都传递⼤量新数据，可局部更新
this.setData({
list[index] = newList[index]
})
3. 后台态页⾯进⾏ setData
当页⾯进⼊后台态（⽤户不可见），不应该继续去进⾏setData，后台态页⾯的渲染⽤户是⽆法感受的，另外后台态页⾯去setData也会抢占前台页⾯的执⾏。也就是上⽂提到的不要忘了clearTimeout、clearInterval。
到此这篇关于关于⼩程序优化的⼀些建议(⼩结)的⽂章就介绍到这了，更多相关⼩程序优化内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。