更新时间：2023-09-22 15:37:48贡献者收藏订阅更新我的文档设置返回文档性能分析报告中含有大量的小程序运行细节数据，涵盖网络请求、渲染帧、性能指标、渲染指令、接口调用、产物内容，以及事件摘要、事件之间的链路分析（即前序事件分析）等功能。性能分析面板按照功能可分为以下区域： 面板中展示了丰富的性能分析报告，下面列举一下常见的使用场景。1. “轨道”信息查看 在分析面板中，信息按照从上到下的分层“轨道”进行显示，目前包括以下几种轨道：●网络●渲染帧●性能指标●渲染指令●逻辑层●接口调用点击 ► 按钮，可以展开该轨道的详细信息，并可在轨道内点击标签，在 摘要和时间日志 区域查看该时间的详细信息。此外，通过调整时间轴可以控制各轨道的显示范围，每个轨道之间的时间戳也是同步的，可以竖向观察在某一时刻各轨道的状态，对小程序运行情况进行综合分析。2. 逻辑层事件分析点击 逻辑层 轨道的 ► 按钮，展开逻辑层火焰图的详细信息，其中主要记录了 任务 和 事件 两大类信息：任务 任务 一般为火焰图一个线程的最上层，用来表示 javascript 中的一个“宏任务”或者“微任务”，目前的任务类型有： ■ 小程序框架启动 一般为逻辑层的第一个任务，用于表示小程序业务代码开始执行。 ■ 逻辑层页面初始化 当渲染层的一个页面准备好时，会通知逻辑层开始执行页面对应的生命周期，如page.onload、page.onshow 等。 ■ settimeout、setinterval 回调 表示发生了一次定时器回调。 ■ runmicrotask、promise 回调 表示实际执行了一次微任务（由全局 promise 触发），其中 runmicrotask 内部会包含（promise 完成回调，promise 失败回调等子任务）。 ■ api 回调 表示一次接口调用的回调。 事件事件 一般不位于“火焰图”的最上层，用于表示代码执行某个特定的业务行为（例如某个生命周期，或者某个 api 调用），目前的事件类型有： ■ 执行逻辑层脚本 一般为逻辑层的第一个事件，用于表示小程序应用代码开始执行，同时也可以表示分包的脚本执行。 ■ settimeout、setinterval 表示实际发生了一次定时器设置，根据图示会显示对应的定时器回调任务。 其中，图中的箭头表示从 settimeout 开始执行，到 settimeout 触发回调的逻辑行为，开发者可以根据这条连线追踪自己异步代码的执行情况。 ■ api 调用 表示一次接口调用的发起，根据图示会显示对应的“api 回调”任务。 其中，图中的箭头表示从接口开始调用，到接口调用结束的逻辑行为，开发者可以根据这条连线分析接口调用链路、调用耗时等行为。 ■ queuemicrotask 表示实际请求创建一个微任务，该事件由全局 promise 触发，同时轨道上也会显示对应的 runmicrotask 任务。 ■ 插件注入 表示插件的业务代码被实际执行。 ■ 代码注入 表示对应路径的页面代码被执行。 ■ 生命周期 表示小程序的生命周期被执行。 ■ 页面生命周期 表示小程序页面的生命周期被执行，一般在 逻辑层页面初始化 中产生。 ■ 组件生命周期 表示小程序自定义组件的生命周期被执行，一般在“数据批处理”中产生。 ■ setdata 表示开发者在页面/自定义组件上调用了 setdata 方法，一般会触发 数据批处理过程。 setdata 的执行时机有两种情况：●如果在页面/自定义组件的特定方法中执行，会在方法结束时统一执行 数据批处理过程。●如果在其它方法中（如“settimeout 回调”任务中），会在 setdata 结束时立即执行 数据批处理过程。■ $splicedata 表示开发者在页面/自定义组件上调用了 $splicedata 方法，一般会触发 数据批处理过程。 $splicedata 的执行时机也有两种情况：●如果在页面/自定义组件的特定方法中执行，会在方法结束时统一执行 数据批处理过程。●如果在其它方法中（如“settimeout 回调”任务中），会在 $splicedata 结束时立即执行 数据批处理过程。■ 数据批处理过程 表示页面/自定义组件的数据变更。开发者实际执行了至少一次 setdata 或 $splicedata 之后，会开始对当前数据变更进行运算，创建/更新/删除自定义组件，并触发后续自定义组件生命周期变化。 ■ 提交界面更新 在 数据批处理过程 结束后，如果涉及渲染层需要变化的，会由小程序框架触发“提交界面更新”事件，将数据发送到“渲染层”，通过跨进程通信更新界面。 3. 代码堆栈分析通过“逻辑层事件分析”后，如果发现某些行为的耗时较长，可以通过代码堆栈分析找到相关的代码位置，并进行代码优化。 如上图中，在逻辑层轨道中，如果认为某个接口调用的耗时较长，点击标签后，切换显示 摘要 面板，可以在 详细信息 中看到此标签对应的代码位置，点击后即可跳转到 源代码 面板。 由于编译后的小程序被压缩为单行，可以点击格式化按钮对代码进行格式化，便可以显示到代码的实际位置，之后根据业务逻辑进行优化即可。 另外， 除了定位当前位置的代码，还可以对事件的调用堆栈进行分析： 4. 事件日志查看点击逻辑层轨道中某个标签，切换到 事件日志 面板，可在表格中查看该事件内部所有子事件的细节信息，如：●开始时间●自身耗时●总时间●活动名称在 活动 一列显示有该事件的代码位置，选中某一行的事件后，在右侧面板中会显示该事件的调用堆栈信息。 5. 渲染帧查看渲染帧 frames 轨道展示了小程序在对应时间点上的页面主体信息，包括文本和图片节点。其中文本节点使用方框进行绘制，代表该节点的位置和大小；图片节点使用原图进行绘制。 直接点击渲染帧，可以在预览视图中放大显示： 并且可以通过按钮切换前后的渲染帧，以观察渲染帧的变化： 在预览视图中，通过按下 esc 或者点击预览帧以外的区域，可以退出预览视图。分析渲染帧变化 点击渲染帧图片上方的耗时信息标签，可以在摘要面板中查看引起当前帧变化的来源，包括文本和图片两种来源： 6. api 接口调用接口调用分析可以同时结合“逻辑层”和“接口调用”两个轨道，分析 api 接口的调用情况。 如上图所示：●在逻辑层轨道中：从左往右分别显示了接口 my.getstorage() 的调用、回调，以及两者之间的连线，代表小程序业务逻辑中一条完整的接口调用路线。●在接口调用轨道中：显示了与逻辑层轨道相对应的接口调用信息。综合分析两个轨道的信息，可以得到某个接口的调用时长、触发时间、回调事件、前后逻辑等信息。同步/异步调用在逻辑层、接口调用双轨道组成的视图汇总，同步 api 调用和异步 api 调用采用不同的方式呈现： 同步 api 调用 在逻辑层与接口调用轨道有相同的持续时间占用，用 sync 来标记： 异步 api 调用 在逻辑层占用时间较短，但是会生成一个“api 回调”任务，用 async 来标记。 接口调用细节在“接口调用轨道”，点击某个标签之后，可以在摘要面板中查看此次调用的细节信息，包括关键参数、调用主体两部分。 关键参数 为了方便开发者针对调用目标进行优化，对于一些常见的、获取资源类的接口，额外标记了该接口的关键参数。 例如：●my.request：记录了 url 参数。●my.getstorage / my.setstorage：记录了 key 参数。调用主体 为了方便开发者针对接口调用来源进行优化，额外标记了该接口的调用主体。调用主体包括三种类型：●小程序框架：标识为“appx”。●小程序应用：标识为“app”或空。●小程序插件：标识为 16 位的数字，表示该插件的 app id。7. 网路请求分析 在 网络 轨道中，可以查看本次运行过程中请求的网络资源情况，包括小程序框架资源、小程序业务资源等，开发者关注小程序业务的资源即可。支持的资源类型有：●图像●css●字体●javascript 脚本●json 资源点击某个资源之后，还可以在 摘要 面板中查看该资源的详细信息，如 url、加载时长、mime 类型、资源预览等。8. 异步调用链分析前序事件分析当选中任何一个 “任务”，都会在当前的火焰图上，绘制这个任务的“触发来源”→“任务”的异步连线。 例如，选中逻辑层轨道中的某个“settimeout 回调”，可以通过连线找到此 settimeout 的触发位置： 在右侧的“前序事件”面板中，也会显示出这两者之间的关系： 图中整体右上角的按钮 ，可以控制“前序事件”面板的显示和隐藏。异步调用链分析小程序从启动开始，经过一系列的网络请求、接口调用，最终获取数据并通过 setdata 更新页面数据，从而展示给开发者最新的信息。小程序代码的执行过程可能是一系列的异步调用操作（包括 promise、async/await，以及小程序代码特有的 success/fail/complete 回调函数），这些异步调用也是耗时的主要来源。 性能分析面板提供了基本的异步调用链分析，可以捕捉到整个链路上的耗时信息，并将其中耗时较长的部分突出显示。在逻辑层轨道中，火焰图中的曲线连接表示各事件之间的追溯关系，开发者可根据这一条线路的指引，观察在 setdata 之前的所有逻辑行为，并针对性地找到耗时较长的事件进行优化。 如上图所示，点击“逻辑层”轨道中某个标签之后，在右侧的 前序事件 面板汇总，会显示出该事件的异步调用链路，并显著标注出整条链路中耗时较长的事件。 图中所示的链路为： querymicrotask → runmicrotask → my.getstorage 调用 → my.getstorage 回调 → settimeout → settimeout 回调 → setdata 上图中可以看出：●querymicrotask → runmicrotask 中，页面 pages/index/index 初始化较慢，查看接口调用轨道后可以发现对应的长耗时接口。●my.getstorage 调用耗时较长，需要优化存储的数据结构和内容。
