自动插桩：页面加载追踪

欢迎回到第 10 章的学习。在上一节，我们初始化了 OpenTelemetry SDK。现在我们要学习自动插桩：页面加载追踪，这是前端性能监控的重要组成部分。

本节将学习：页面加载性能、资源加载时间、以及 Core Web Vitals。

页面加载性能

页面加载性能的作用是什么？ 追踪页面加载的各个阶段，识别性能瓶颈，优化用户体验。

页面加载阶段有哪些呢？

第一个阶段：导航开始（navigationStart）。 用户开始导航到页面。

第二个阶段：DOM 内容加载（DOMContentLoaded）。 HTML 文档完全加载和解析完成。

第三个阶段：页面加载完成（loadEventEnd）。 所有资源（图片、样式、脚本）都已加载完成。

第四个阶段：首次内容绘制（First Contentful Paint，FCP）。 浏览器首次渲染文本或图片。

第五个阶段：最大内容绘制（Largest Contentful Paint，LCP）。 最大内容元素渲染完成。

页面加载时间线：

资源加载时间

资源加载时间的作用是什么？ 追踪各个资源的加载时间，识别慢资源，优化资源加载策略。

资源类型包括哪些呢？

第一个：样式表（CSS）。 CSS 文件的加载时间，影响页面渲染。

第二个：脚本（JavaScript）。 JavaScript 文件的加载时间，影响页面交互。

第三个：图片（Images）。 图片的加载时间，影响视觉体验。

第四个：字体（Fonts）。 字体文件的加载时间，影响文本渲染。

资源加载追踪代码：

// DocumentLoadInstrumentation Automatically track resource loads
// The following information is collected automatically without additional configuration：
// - Resource types（CSS、JS、Image、Fontetc）
// - sourceURL
// - Resource load time
// - Resource size

Core Web Vitals

Core Web Vitals 是什么？ Google 定义的关键用户体验指标，包括 LCP、FID、CLS。

LCP（Largest Contentful Paint）是什么？ 最大内容元素渲染完成的时间，理想值 < 2.5 秒。

FID（First Input Delay）是什么？ 用户首次与页面交互的延迟时间，理想值 < 100 毫秒。

CLS（Cumulative Layout Shift）是什么？ 累积布局偏移分数，衡量页面稳定性，理想值 < 0.1。

如何追踪 Core Web Vitals？ 使用 Web Vitals 库，自动收集这些指标，发送到 OpenTelemetry。

Web Vitals 集成代码：

文件路径：

src/telemetry.js

import { onCLS, onFID, onLCP } from 'web-vitals';
import { trace, context } from '@opentelemetry/api';

function sendToAnalytics(metric) {
  const tracer = trace.getTracer('web-vitals');
  const span = tracer.startSpan(`web-vital.${metric.name}`, {
    attributes: {
      'web.vital.name': metric.name,
      'web.vital.value': metric.value,
      'web.vital.id': metric.id,
      'web.vital.navigationType': metric.navigationType,
    },
  });
  
  span.end();
}

// tracking Core Web Vitals
onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

本节小结

在本节中，我们学习了自动插桩：页面加载追踪：

第一个是页面加载性能。 追踪页面加载的各个阶段，识别性能瓶颈，优化用户体验。

第二个是资源加载时间。 追踪各个资源的加载时间，识别慢资源，优化资源加载策略。

第三个是 Core Web Vitals。 LCP、FID、CLS 关键指标，衡量用户体验，优化目标值。

页面加载追踪流程： 自动插桩启用 → 追踪页面加载事件 → 收集性能指标 → 发送到 Collector → 在 Grafana 中可视化。

这就是自动插桩：页面加载追踪。通过页面加载追踪，我们可以全面了解前端应用的性能表现。

在下一节，我们将学习自动插桩：用户交互追踪。学习如何追踪用户交互事件。