性能指标的收集与计算方式
在学习了如何使用启动性能分析工具进行性能优化后,本章将为您介绍工具性能指标数据的的定义与数据的收集方式。
逻辑层、渲染层阶段统计表
阶段统计表涵盖了用户从入口点击到首屏渲染的全流程。
所有的开始、结束时间均为相对于起点的相对毫秒时间值;首次打开时,起点为逻辑层初始化开始时间点;非首次打开时,为打开新页面的导航 API 调用时间点,如 navigateTo。
逻辑层各阶段 | 说明 |
---|---|
初始化 | 小程序逻辑层收到打开小程序事件后,会做一些初始化操作。 |
加载动态库 | 加载小程序动态库的逻辑层代码。 |
加载逻辑代码 | 加载小程序逻辑层代码;注意:小程序代码打包时会将开发者的代码文件进行模块化封装;加载逻辑层代码时,仅将相关代码模块进行注册,而不会立即执行开发者的代码文件;执行时机会尽可能按需。 |
执行逻辑代码 | 执行 app.js 以及其依赖的 js 代码。目前,执行 app.js 文件会调用 App.onLaunch,因此此时间包含了 App.onLaunch 的执行时间。 |
App.onLaunch | App.onLaunch 执行。 |
执行页面代码 | 执行页面以及其依赖的 js 代码。 |
收集 initData | initData 为页面初次渲染所用到的必须数据,包括首页面和其用到的所有自定义组件 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 操作,因此耗时不代表实际组件渲染耗时。组件生命周期耗时,可用于比较一些组件比另一些组件更加耗时,其绝对值意义不大。
此外,小程序内部会对部分基础组件进行优化,以提升性能;优化后的组件不再记录组件信息。