性能指标的收集与计算方式

在学习了如何使用启动性能分析工具进行性能优化后,本章将为您介绍工具性能指标数据的的定义与数据的收集方式。

逻辑层、渲染层阶段统计表

阶段统计表涵盖了用户从入口点击到首屏渲染的全流程

性能指标的收集与计算方式 - 图1 性能指标的收集与计算方式 - 图2

所有的开始、结束时间均为相对于起点的相对毫秒时间值;首次打开时,起点为逻辑层初始化开始时间点;非首次打开时,为打开新页面的导航 API 调用时间点,如 navigateTo。

逻辑层各阶段说明
初始化小程序逻辑层收到打开小程序事件后,会做一些初始化操作。
加载动态库加载小程序动态库的逻辑层代码。
加载逻辑代码加载小程序逻辑层代码;注意:小程序代码打包时会将开发者的代码文件进行模块化封装;加载逻辑层代码时,仅将相关代码模块进行注册,而不会立即执行开发者的代码文件;执行时机会尽可能按需。
执行逻辑代码执行 app.js 以及其依赖的 js 代码。目前,执行 app.js 文件会调用 App.onLaunch,因此此时间包含了 App.onLaunch 的执行时间。
App.onLaunchApp.onLaunch 执行。
执行页面代码执行页面以及其依赖的 js 代码。
收集 initDatainitData 为页面初次渲染所用到的必须数据,包括首页面和其用到的所有自定义组件 data。
Page.onInit首页面执行 Page.onInit。
App.onAppShow首次 App.onShow 执行。
构建自定义组件如果首页面初次渲染用到了自定义组件,在逻辑层会构建相应的实例,并执行相应的生命周期钩子 created、 attached。
Page.onLoad首页面执行 Page.onLoad。
Page.onShow首页面执行 Page.onShow。
Page.onReady首页面执行 Page.onReady。

通常,加载代码的耗时与文件大小正相关,即文件越大,加载越耗时。

渲染层说明
初始化小程序渲染层收到打开小程序事件后,会做一些初始化操作。
加载资源加载小程序当前页面所有用到的所有资源,包括页面模板(.swan)、.css、自定义组件等。
初始化自定义组件初始化当前页面用到的自定义组件。
初始化页面 Page初始化页面 Page,并将 initData 与对应的页面、自定义组件进行组装。
首次渲染操作 DOM,渲染页面。

一些计算指标

  • FMP(First Meaningful Paint):页面首次有意义的绘制。
    • FMP 的计算方式在 IOS 与 Android 平台有所区别,目前本工具无法统计到 IOS 下小程序的 FMP。
    • 在某些情况,可能无法采集到 Android 下有效的 FMP。
    • “有意义的绘制”:在不同的业务场景下,对应着不同的含义。因此收集的 FMP,无法保证在所有场景下都能比较准确地符合开发者的期望。
  • 核心 request:根据数据量与 setData 的数据计算得出。
  • 打点请求:请求重复多次,且几乎无返回数据,推断为打点请求。
  • 重复请求:如果请求体几乎完全一样,响应数据完全一样,则认为是重复请求。
  • 核心 setData:根据数据量、该次 setData 对渲染的影响与和 FMP 的关系计算得出。

以上指标,均是按照一定规则计算得出,无法保证对于所有小程序都是适用的。规则本身也在内部不断迭代中,如果有问题或者优化建议,欢迎通过开发者社区给我们反馈。

组件生命周期

小程序运行时中,大部分基础组件或自定义组件会被转化为统一的内部组件进行渲染;这些内部组件的生命周期钩子接近于通用的前端框架,主要包括:

  • 模板编译
  • 初始化
  • 创建
  • 挂载
  • 更新
  • 销毁
  • 页面更新:每次页面整体更新,或可能影响布局的部分组件更新时调用

本工具记录生命周期钩子的调用与耗时,均指的是组件自身的耗时,而不包含数据与组件实例绑定、操作 DOM 更新渲染等耗时;因此,一次 setData 的渲染耗时大于其引起的所有组件的生命周期钩子耗时。

一些组件是异步渲染的,即不会在生命周期中完成全部的 DOM 操作,因此耗时不代表实际组件渲染耗时。组件生命周期耗时,可用于比较一些组件比另一些组件更加耗时,其绝对值意义不大。

此外,小程序内部会对部分基础组件进行优化,以提升性能;优化后的组件不再记录组件信息。