工具功能介绍

在成功收集到小程序的性能后，本章将为您介绍性能工具提供的功能。

性能工具主要由三个部分构成：顶部栏、左侧栏与主面板。

顶部栏中央是两个选择器，分别用于选择历史小程序性能数据和对应的不同页面的性能数据。顶部栏右侧的按钮分别用于获取最新小程序性能数据、打开简易的工具使用帮助与使用反馈。

左侧栏用于切换不同的主面板，以显示不同类型的性能数据。

接下来，我们来依次介绍左侧栏每个面板的功能。

FMP

主体内容左侧为 FMP 时序图，右侧为逻辑层与渲染层各阶段的耗时统计。

FMP 时序图，将逻辑层和渲染层各个阶段，按照时间比例，从上到下映射到图中。因此，从上到下，时间递增；图中线越长，耗时越长。各阶段具体的含义和统计方式可以参考性能指标的收集与计算方式。

逻辑层与渲染层相互的通信，除了 setData 外，还包括：

• sendInitData：逻辑层将 initData 发送至渲染层。
• firstPageRender：首次渲染后，渲染层将一些必要的节点信息发送至逻辑层。

不同颜色的线，仅用于区分不同类型的流程阶段。

本工具所有起点或结束点，不做特殊说明，均是相对于逻辑层起点的相对毫秒时间值。

request 统计

表格为当前页面发出的所有 request 统计，图代表正在进行（或者说并行）的 request 数量。

标签为按照一定规则，自动为 request 标注的类型。计算方式可参考性能指标的收集与计算方式。

swan API 统计

表格为当前页面所有调用的 swan API 统计。

假设小程序代码中有一条语句为：const requestTask = swan.request({})：调用时间为发起 swan.request （执行此条语句）的时间点；同步耗时，指调用时间到得到同步返回值（requestTask）的时间间隔；回调调用时间，指调用时间到开发者参数中 success/fail 等回调执行时的时间间隔。

如果为同步 swan API，则没有回调调用时间，如 getStorageSync。

除了单独的面板外，在 FMP 阶段表中，点击 ⌵ 展开某个阶段，会列出该阶段所有的 API 统计。

image 统计

表格为当前页面所有的图片统计。

图片的请求时间为创建 img 元素的时间点；请求耗时为从创建到其 load 事件触发的时间间隔；图片展示大小计算于小程序发送性能数据时。

setData 统计

setData 统计了当前页面 Page 实例和自定义组件实例所有的 setData 调用。

发送耗时，指逻辑层调用 setData 到渲染层收到数据的时间间隔；如果在传输时，逻辑层或渲染层存在其他更高优的任务，可能会导致发送耗时比预期的要长。

渲染耗时，指渲染层收到数据到完成渲染的时间。完成渲染，会尽可能接近修改完 DOM 后下一帧（绘制到屏幕上）的时间。如果在逻辑层频繁地 setData，渲染层可能出现 setData 排队的情况。渲染层会按照 setData 触发的顺序，依次绘制到页面上，因此可能出现，setData 到达时间较早，但是实际渲染发生较晚，导致整体渲染时间较长的情况。

此外，即使某次 setData 造成的 DOM 修改操作较少，但此时可能存在与逻辑层的通信、与客户端交互等逻辑，使得实际的渲染被推后了，而造成渲染时间比预期的要久。

点击 setData 渲染耗时的时间，将会展示在这次渲染时间期间内，所有的组件统计，包括组件的生成数量、各生命周期耗时等。点击空白处返回 setData 统计面板。

组件的生命周期含义可以参考性能指标的收集与计算方式。

组件统计

当前页面所有的组件统计。

基础组件为小程序官方提供的组件，如 view、button等。组件生命周期耗时，可用于比较一些组件比另一些组件更加耗时，其绝对值意义不大。

在了解完性能工具的各个面板后，我们来介绍如何使用这些功能来优化小程序的线上性能。