渲染耗时

初始化流程耗时

Lynx 页面展示之前需要完成包括容器初始化、准备 TemplateBundle 等初始化工作。

如下图所示是页面显示前必须经过的初始化阶段,包括了容器LynxViewBackground Thread Runtime 三部分的初始化耗时。Performance API 提供了 InitContainerEntryInitLynxviewEntryInitBackgroundRuntimeEntry 来描述这些阶段的关键时刻。你可以任意组合这些性能数据进行整个初始化阶段的具体分析。

完整的初始化阶段划分

即使这些准备工作发生在页面渲染之前,它们性能好坏也对用户体验有直接影响。过慢的初始化速度会导致更晚的渲染,从而导致用户很晚才能看到内容进而认为应用性能很差。

为了尽可能降低加载阶段的耗时,你可以通过本地缓存、预加载 TemplateBundle 和预创建 LynxView 等手段预先完成这些初始化工作,确保第一时间响应用户交互,提升用户体验。

首帧渲染耗时

Lynx 独特的双线程架构允许主线程运行时中执行渲染操作。这使得 Lynx 具备首帧直出 (Instant First-Frame Rendering,IFR) 的特性:Lynx 通过短暂阻塞主线程,确保首帧一次性完整呈现,因为用户不会看到空白,可以给用户带来一种即刻响应的感知体验。

阅读首帧渲染最佳实践来了解如何在首帧渲染有意义的内容。

你可以获取 LoadBundleEntry 来了解首帧渲染的详细时间数据。

非首帧渲染耗时

很多页面首帧只能展示加载动画或者骨架图,页面通过原生模块或者网络请求获取关键的数据才能完成显示。在这种场景下,读者需要关键的数据更新触发的渲染流程的耗时。

那么读者可以标记 Lynx 流水线来跟踪这次重要的数据更新。标记后,可以获取被标记的 Lynx Pipeline 的详细时间数据。 这次渲染的耗时数据可以通过 PipelineEntry 接口获取。

内置指标

Lynx 内置了 FCP 和 ActualFMP 两个指标,对应的数据通过 MetricFcpEntry, MetricActualFmpEntry 提供。

FCP

FCP 是衡量页面首次渲染完成所需时间的关键性能指标。它指的是用户第一次看到 Lynx 页面中任意内容(如文本、图片等)所需的时间。FCP 事件在 Lynx 绘制完页面第一帧时触发。

根据不同起始点,Lynx 提供了 fcp、lynxFcp、totalFcp 三个指标。在渲染流程中,每个指标的定义如下图:

ActualFMP

Actual Fmp 是衡量页面“真实数据”渲染完成所需时间的关键性能指标。它反映了用户看到页面真实数据的速度。MetricActualFmpEntry 是用于描述该指标的数据类型,继承自 PerformanceEntry

你可以通过 __lynx_timing_flag="__lynx_timing_actual_fmp" 标记重要元件的渲染完成时机,从而产生该指标。

根据不同起始点,Lynx 提供了 actualFmplynxActualFmptotalActualFmp 三个指标。在渲染流程中,每个指标的定义如下图:

自定义指标

不同的业务目标意味着你需要关注不同的性能指标。对性能 API 的使用可以不局限于通过内置指标来分析页面性能,你也可以灵活组合不同 PerformanceEntry 提供给你的关键节点的时间,构建出一套适配你的应用程序的性能检测指标。

假如你希望关注从首屏渲染结束到首次重要数据更新的延迟,你可以像下面的代码这样灵活组合 LoadBundleEntryPipelineEntry 计算出一个属于你的性能指标 waitingDuration。它可以帮助你监测网络请求、文件读取等行为的速度,精准定位页面性能变坏的原因。

waiting duration

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。