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


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判断浏览器的比较全的代码
Feb 13 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 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 图片上传代码
2011/09/13 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python with标签使用方法解析
2020/01/17 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
优秀公益广告词大全
2014/03/19 职场文书
教师工作总结范文2014
2014/11/10 职场文书
白银帝国观后感
2015/06/17 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
协议书格式模板
2016/03/24 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Python OpenCV实现图形检测示例详解
2022/04/08 Python