工具功能介绍

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

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

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

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

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

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

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

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

    FMP

    request 统计

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

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

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

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

    api1

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

    image 统计

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

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

    image

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

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

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

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

    setData

    组件统计

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

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

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