关于小程序优化的一些建议(小结)


Posted in Javascript onDecember 10, 2020

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

小程序有并发限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。

所有为了保险起见,采用公共方法和组件

编写公共方法和组件,可以避免重复造轮子。
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。

到此这篇关于关于小程序优化的一些建议(小结)的文章就介绍到这了,更多相关小程序优化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 #Javascript
javascript实现放大镜功能
Dec 09 #Javascript
Javascript实现单选框效果
Dec 09 #Javascript
javascript实现移动端轮播图
Dec 09 #Javascript
JavaScript实现弹出窗口效果
Dec 09 #Javascript
五句话帮你轻松搞定js原型链
Dec 09 #Javascript
You might like
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
详解django三种文件下载方式
2018/04/06 Python
python实现简易内存监控
2018/06/21 Python
python模块导入的细节详解
2018/12/10 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
料理师求职信
2014/01/30 职场文书
建设投标担保书
2014/05/13 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
考试作弊检讨
2015/01/27 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
建国大业观后感800字
2015/06/01 职场文书
2016年寒假生活小结
2015/10/10 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Win10系统下配置Java环境变量
2021/06/13 Java/Android