智能小程序性能优化 01 - 数据分析与启动阶段优化
Posted: 2022年 Nov 7日 11:17
小程序的性能又可以分为「启动性能」和「运行时性能」两个主题。
「启动性能」让用户能够更快的打开并看到小程序的内容，「运行时性能」保障用户能够流畅的使用小程序的功能。除了本身的功能之外，良好性能带来的良好用户体验，也是小程序能够留住用户的关键。
小程序的框架结合了 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
