小程序的性能又可以分为「启动性能」和「运行时性能」两个主题。
「启动性能」让用户能够更快的打开并看到小程序的内容,「运行时性能」保障用户能够流畅的使用小程序的功能。除了本身的功能之外,良好性能带来的良好用户体验,也是小程序能够留住用户的关键。
小程序的框架结合了 Web 开发和客户端开发的技术,并进行了进一步的创新。因此,一些 Web 开发中性能优化的方法同样适用于小程序,比如缓存的使用、网络请求的优化、代码压缩等等。
作为小程序开发者,我们常常会被下面几个问题所困扰:
- 小程序启动慢;
- 白屏时间长;
- 页面渲染慢;
- 运行内存不足;
性能数据分析
下载耗时指标
蓝色的线代表容器加载中,用户等待容忍度的时长。
可以看到,用户在5000ms以上的容器加载就可能会出现一定的无法容忍并关闭小程序,导致小程序无法触达。
绿是的线是基础库的加载时长,这部分时间也并不需要开发者去特别关心。
橘红线比较平稳,这部分为视图层JS注入耗时,视图层JS注入主要为首屏的TYML解析与样式注入,依然是比较平稳。
绿色线-小程序包下载耗时这部分在容器加载占比还是比较大,而且并不稳定会与,这部分在开发者层面会有一些优化空间。
启动耗时指标
启动耗时指的是容器准备完毕后到视图展示的耗时,主要为js注入耗时与渲染耗时,可以看到这部分相对平稳。js注入耗时主要与js的复杂度与渲染复杂度相关。
启动阶段优化
无用文件、函数、样式剔除
经过多次业务迭代,无可避免的会存在一些弃用的组件/页面,以及不被调用的函数、样式规则,这些冗余代码会白白占据宝贵的代码包空间。
常见问题举例:
- 打包页面中未用到的多余的图片资源依然会被打进包内。
- 若页面在usingComponents配置引入自定义组件但是未使用,依然会被打进包内。
- TYML中的import引用其他模板文件、TYSS中的@import其他样式文件、JS中引用的其他模块,是否有无用但是未删除依赖关系的?
ray 的项目,可以通过 -a 或者 --analyze 开启打包分析,协助开发者进行优化工作。
https://juejin.cn/post/7035951233907032077#heading-11
- 是否同一个库存在多个版本?
- 是否有过大的第三方包?
- 是否某些包可以按需加载?
- 是否某些包可以动态加载?
对静态资源优化
- 除了部分用于容错的图片必须放在代码包(譬如网络异常提示)之外,建议开发者把图片、视频等静态资源都放在 CDN 上。
需要注意,Base64 格式本质上是长字符串,和 CDN 地址比起来也会更占空间。 - 图片压缩: 推荐 tinypng,比工具更好用的图片压缩。 https://tinypng.com/
这部分内容可以查看我们的另外一篇文章:https://tuyaos.com/viewtopic.php?t=179