Android页面速度指标：求用户进入到内容渲染完成时长的测算方案

要计算从用户进入页面到应用完成内容处理与渲染的耗时，由于这个指标属于业务自定义节点（不同应用的“渲染完成”判定标准不同），多数第三方分析工具不会预设这个统计项，你可以通过浏览器原生的Performance API手动实现埋点，再将数据上报到你现有的工具中。

实现步骤： #

1. 标记起始时间：以页面导航开始的时间作为起点，在页面初始化阶段记录：

// 页面加载初期执行，记录起始时间
const appStartTimestamp = performance.now();

2. 定义“渲染完成”的判定节点：根据你的应用逻辑，确定业务层面的渲染完成时机（比如所有异步数据加载完毕、核心DOM渲染完成、交互组件初始化完成），在这个节点记录结束时间并计算耗时：

// 示例：假设这是你的应用核心内容渲染完成的回调函数
function onCoreContentRendered() {
  const renderCompleteTimestamp = performance.now();
  const totalRenderDuration = renderCompleteTimestamp - appStartTimestamp;
  
  // 将数据上报到你已使用的工具（以Posthog为例）
  posthog.capture('app_render_finished', {
    render_duration_ms: totalRenderDuration
  });
}

3. 结合浏览器性能数据优化（可选）：如果需要更细致的阶段分析，可以通过Performance Timeline API获取浏览器原生的加载阶段数据，对比业务渲染耗时：

// 获取页面导航的性能条目
const navigationData = performance.getEntriesByType('navigation')[0];
// 浏览器DOM加载完成的时间（从导航开始到DOMContentLoaded事件结束）
const domLoadDuration = navigationData.domContentLoadedEventEnd - navigationData.navigationStart;

说明： #

• 第三方工具（如Firebase Performance、Mixpanel等）提供的多是标准化Web性能指标（如LCP、FID、CLS），但业务自定义的渲染完成节点需要自己埋点。
• 你可以将计算出的耗时作为自定义事件上报到现有分析工具中，实现数据的统一管理。

内容的提问来源于stack exchange，提问作者Jagdish Choudhary