智能小程序性能优化 01 - 数据分析与启动阶段优化

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
User avatar
Muzzzhi
Posts: 86

小程序的性能又可以分为「启动性能」和「运行时性能」两个主题。

「启动性能」让用户能够更快的打开并看到小程序的内容,「运行时性能」保障用户能够流畅的使用小程序的功能。除了本身的功能之外,良好性能带来的良好用户体验,也是小程序能够留住用户的关键。

小程序的框架结合了 Web 开发和客户端开发的技术,并进行了进一步的创新。因此,一些 Web 开发中性能优化的方法同样适用于小程序,比如缓存的使用、网络请求的优化、代码压缩等等。

作为小程序开发者,我们常常会被下面几个问题所困扰:

  • 小程序启动慢;
  • 白屏时间长;
  • 页面渲染慢;
  • 运行内存不足;

性能数据分析

下载耗时指标

miniapp-02.png

蓝色的线代表容器加载中,用户等待容忍度的时长。

可以看到,用户在5000ms以上的容器加载就可能会出现一定的无法容忍并关闭小程序,导致小程序无法触达。

绿是的线是基础库的加载时长,这部分时间也并不需要开发者去特别关心。

橘红线比较平稳,这部分为视图层JS注入耗时,视图层JS注入主要为首屏的TYML解析与样式注入,依然是比较平稳。

绿色线-小程序包下载耗时这部分在容器加载占比还是比较大,而且并不稳定会与,这部分在开发者层面会有一些优化空间。

启动耗时指标

miniapp-01.png

启动耗时指的是容器准备完毕后到视图展示的耗时,主要为js注入耗时与渲染耗时,可以看到这部分相对平稳。js注入耗时主要与js的复杂度与渲染复杂度相关。

启动阶段优化

无用文件、函数、样式剔除

经过多次业务迭代,无可避免的会存在一些弃用的组件/页面,以及不被调用的函数、样式规则,这些冗余代码会白白占据宝贵的代码包空间。

常见问题举例:

  1. 打包页面中未用到的多余的图片资源依然会被打进包内。
  2. 若页面在usingComponents配置引入自定义组件但是未使用,依然会被打进包内。
  3. TYML中的import引用其他模板文件、TYSS中的@import其他样式文件、JS中引用的其他模块,是否有无用但是未删除依赖关系的?
    miniapp-03.png
    miniapp-04.png

ray 的项目,可以通过 -a 或者 --analyze 开启打包分析,协助开发者进行优化工作。

miniapp-05.png

https://juejin.cn/post/7035951233907032077#heading-11

  1. 是否同一个库存在多个版本?
  2. 是否有过大的第三方包?
  3. 是否某些包可以按需加载?
  4. 是否某些包可以动态加载?

对静态资源优化

  • 除了部分用于容错的图片必须放在代码包(譬如网络异常提示)之外,建议开发者把图片、视频等静态资源都放在 CDN 上。
    需要注意,Base64 格式本质上是长字符串,和 CDN 地址比起来也会更占空间。
  • 图片压缩: 推荐 tinypng,比工具更好用的图片压缩。 https://tinypng.com/

这部分内容可以查看我们的另外一篇文章:https://tuyaos.com/viewtopic.php?t=179

:geek: :ugeek: :mrgreen: :roll: :lol: :idea: :arrow: LGTM


Tags:
User avatar
Muzzzhi
Posts: 86

Re: 智能小程序性能优化 01 - 数据分析与启动阶段优化

快速定位第二篇 首屏渲染优化与运行时优化 https://tuyaos.com/viewtopic.php?t=250

:geek: :ugeek: :mrgreen: :roll: :lol: :idea: :arrow: LGTM

User avatar
TheThingX
Posts: 65
Location: TheThingX
Contact:

Re: 智能小程序性能优化 01 - 数据分析与启动阶段优化

:idea: :idea: :idea: :idea:

[][TheThingX.com]
Post Reply