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


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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
一个简单的js树形菜单
Dec 09 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
详解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面向对象程序设计之类常量用法实例
2014/08/20 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
php unlink()函数使用教程
2018/07/12 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python列表推导式操作解析
2019/11/26 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
美国在线宠物商店:Chewy
2019/01/12 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
销售实习自我鉴定
2013/12/07 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
诚信贷款承诺书
2014/05/30 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
党员检讨书范文
2014/12/27 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android