Lynx 页面展示之前需要完成包括容器初始化、准备 TemplateBundle 等初始化工作。
如下图所示是页面显示前必须经过的初始化阶段,包括了容器、LynxView 和 Background Thread Runtime 三部分的初始化耗时。Performance API 提供了 InitContainerEntry
、InitLynxviewEntry
和 InitBackgroundRuntimeEntry
来描述这些阶段的关键时刻。你可以任意组合这些性能数据进行整个初始化阶段的具体分析。
即使这些准备工作发生在页面渲染之前,它们性能好坏也对用户体验有直接影响。过慢的初始化速度会导致更晚的渲染,从而导致用户很晚才能看到内容进而认为应用性能很差。
为了尽可能降低加载阶段的耗时,你可以通过本地缓存、预加载 TemplateBundle 和预创建 LynxView 等手段预先完成这些初始化工作,确保第一时间响应用户交互,提升用户体验。
Lynx 独特的双线程架构允许主线程运行时中执行渲染操作。这使得 Lynx 具备首帧直出 (Instant First-Frame Rendering,IFR) 的特性:Lynx 通过短暂阻塞主线程,确保首帧一次性完整呈现,因为用户不会看到空白,可以给用户带来一种即刻响应的感知体验。
阅读首帧渲染最佳实践来了解如何在首帧渲染有意义的内容。
你可以获取 LoadBundleEntry
来了解首帧渲染的详细时间数据。
很多页面首帧只能展示加载动画或者骨架图,页面通过原生模块或者网络请求获取关键的数据才能完成显示。在这种场景下,读者需要关键的数据更新触发的渲染流程的耗时。
那么读者可以标记 Lynx 流水线来跟踪这次重要的数据更新。标记后,可以获取被标记的 Lynx Pipeline 的详细时间数据。
这次渲染的耗时数据可以通过 PipelineEntry
接口获取。
Lynx 内置了 FCP 和 ActualFMP 两个指标,对应的数据通过 MetricFcpEntry, MetricActualFmpEntry 提供。
FCP 是衡量页面首次渲染完成所需时间的关键性能指标。它指的是用户第一次看到 Lynx 页面中任意内容(如文本、图片等)所需的时间。FCP 事件 在 Lynx 绘制完页面第一帧时触发。
根据不同起始点,Lynx 提供了 fcp、lynxFcp、totalFcp 三个指标。在渲染流程中,每个指标的定义如下图:
Actual Fmp 是衡量页面“真实数据”渲染完成所需时间的关键性能指标。它反映了用户看到页面真实数据的速度。MetricActualFmpEntry
是用于描述该指标的数据类型,继承自 PerformanceEntry
。
你可以通过 __lynx_timing_flag="__lynx_timing_actual_fmp"
标记重要元件的渲染完成时机,从而产生该指标。
根据不同起始点,Lynx 提供了 actualFmp
、lynxActualFmp
、totalActualFmp
三个指标。在渲染流程中,每个指标的定义如下图:
不同的业务目标意味着你需要关注不同的性能指标。对性能 API 的使用可以不局限于通过内置指标来分析页面性能,你也可以灵活组合不同 PerformanceEntry
提供给你的关键节点的时间,构建出一套适配你的应用程序的性能检测指标。
假如你希望关注从首屏渲染结束到首次重要数据更新的延迟,你可以像下面的代码这样灵活组合 LoadBundleEntry
和
PipelineEntry
计算出一个属于你的性能指标 waitingDuration
。它可以帮助你监测网络请求、文件读取等行为的速度,精准定位页面性能变坏的原因。