更新时间:2023-07-28 17:44:33贡献者收藏订阅更新我的文档设置返回文档通过性能分析工具,可以直观地发现小程序代码中的性能阻塞点,并针对性地进行优化。本篇介绍了几种常见的性能阻塞场景,并给出相应的优化建议。api 接口串行调用、频繁调用接口串行调用 分析上图的性能分析报告,可以在接口调用轨道中看到大量的串行接口调用行为,导致小程序耗时过长。 优化建议:●检查业务代码,避免不要的接口循环调用。●使用 promise.all 并行发起异步调用,避免配套使用 for 循环与 await。接口频繁调用 分析上图中的接口调用轨道,可知其大量调用了 my.getsysteminfosync 接口,该接口耗时较长。 优化建议:●对接口调用结果进行缓存:如非必要,建议开发者对调用结果进行缓存,避免重复调用。启动过程中应尽可能最多调用一次。●使用细粒度的接口代替 my.getsysteminfosync:如果只需获取 clientname、clientversion、language、platform 字段,推荐使用更加轻量化的 my.env api。频繁调用 setdata通过 setdata 和 $splicedata 可以更新页面数据,并最终更新页面显示内容。页面数据更新涉及逻辑层到渲染层的跨进程数据序列化传输,提交较大的数据其耗时较长: 而过于频繁地更新模板也会导致页面变更次数过多,可能会导致页面抖动和卡顿: 优化建议:●检查 setdata 的内容与体积,去除不必要的 setdata 内容。●仅在需要进行页面内容更新时调用 setdata,对连续的 setdata 调用尽可能的进行合并。代码注入优化通常情况下,在小程序启动时,启动页面依赖的所有代码包(主包、分包、插件包等)的所有代码会全部合并注入,包括其它未访问的页面以及未用到自定义组件,同时所有页面和自定义组件的代码会被立刻执行。这造成很多没有使用的代码在小程序运行环境中注入执行,影响注入耗时和内存占用。 与首屏无关的其它页面的代码逻辑注入导致小程序启动流程被拖慢,而使用按需注入与插件懒加载能够有效解决这一性能瓶颈,提升启动速度。 优化建议:●开启 按需注入:开启按需注入(lazycodeloading)特性避免不必要的代码注入和执行,以降低小程序的启动时间和运行时内存。●使用 插件懒加载:插件懒加载方式可提高小程序的首屏性能和接入开发体验。开启插件懒加载的方式只需要在现有静态声明基础上,新增 lazy 标识即可。同时提供预加载功能,可以通过配置 preloadrule 灵活控制页面进行插件包预加载,即提前下载后续页面所需的插件包,提升后续页面打开性能。