JS 浏览器网络请求分析 - 使用 Performance Timeline 测量请求时序

Performance Timeline API 是分析浏览器网络请求及页面性能的核心工具，通过 PerformanceResourceTiming 等接口可精准测量各阶段耗时，结合 PerformanceObserver 实现实时监控与数据聚合，为性能优化提供量化依据。

PerformanceResourceTiming 对象记录了资源请求的完整生命周期，通过以下时间戳可计算各阶段耗时：

• fetchStart：浏览器发起资源请求的起始时间。
• domainLookupStart/domainLookupEnd：DNS 查询耗时（差值）。若值过高，可能因 CDN 配置错误或 DNS 服务器响应慢导致。
• connectStart/connectEnd：TCP 连接耗时。受服务器距离或网络稳定性影响。
• secureConnectionStart（HTTPS 请求）：TLS/SSL 握手开始时间。connectEnd - secureConnectionStart 为握手耗时，若过长需检查证书配置或网络环境。
• requestStart/responseStart：TTFB（首字节时间，差值）。包含服务器处理请求和网络传输时间，高 TTFB 可能因后端慢查询或服务器负载过高。
• responseEnd：资源接收完成时间。responseEnd - responseStart 为内容下载耗时，受资源大小和带宽影响。
• duration：总耗时（fetchStart 到 responseEnd）。

示例分析：若某图片的 domainLookupEnd - domainLookupStart 异常高，可能是 CDN 配置问题导致 DNS 解析效率低下；若 responseStart - requestStart 过高，需排查后端接口性能。

除网络请求外，Performance Timeline 还提供以下关键数据：

• navigation 类型：记录页面加载时序，如 domContentLoadedEventStart（DOM 解析完成时间）、loadEventStart（所有资源加载完成时间），用于衡量页面可交互性。
• paint 类型：包含 first-contentful-paint（首次内容绘制时间）和 largest-contentful-paint（最大内容绘制时间，LCP）。LCP 是 Core Web Vitals 核心指标，直接反映用户感知的加载速度。
• longtask 类型：记录耗时超过 50ms 的任务，用于定位主线程阻塞问题（如复杂计算或大文件解析），可通过拆分任务或使用 Web Workers 优化。
• layout-shift 类型：衡量页面布局稳定性，记录元素意外移动的时间点和原因，避免影响用户体验。
• event 类型：追踪用户交互事件（如点击、输入）的耗时，发现事件处理函数中的性能问题。

• 优势：相比 performance.getEntriesByType() 的快照式获取，PerformanceObserver 可持续监听新事件，适合动态页面或实时监控场景。
• 代码示例：const observer = new PerformanceObserver((list) => { list.getEntries().forEach(entry => { if (entry.entryType === 'resource') { sendToAnalytics({ type: 'resource_timing', url: entry.name, duration: entry.duration, // 其他关键时间戳 }); } else if (entry.entryType === 'paint' && entry.name === 'first-contentful-paint') { sendToAnalytics({ type: 'fcp', time: entry.startTime }); } });});observer.observe({ entryTypes: ['resource', 'paint', 'longtask', 'navigation'], buffered: true });function sendToAnalytics(data) { console.log('发送到分析系统:', data); // 实际项目中可发送至后端或第三方 RUM 服务}

• 数据过滤与清洗：排除异常数据（如失败请求）和不重要的第三方脚本，减少噪声。
• 用户分群：按地区、网络类型（4G/Wi-Fi）、设备型号等分组，精准定位问题。例如，某地区用户 LCP 普遍较高，可能是 CDN 节点问题。
• 趋势分析：观察性能指标随时间的变化，快速发现部署或外部服务异常。
• 可视化：通过直方图、箱线图、热力图等图表展示数据，例如用箱线图对比不同设备类型的 LCP 分布，或用热力图标记高 TTFB 的请求时段。

• 自动化报警：设定阈值（如 LCP > 2.5s），当指标超限时触发报警。
• 集成现有监控系统：将性能数据接入 Grafana、Datadog 等工具，与错误监控、日志分析联动，构建全链路性能视图。

Performance Timeline API 通过 PerformanceResourceTiming 等接口提供了网络请求的精细化时序数据，结合 navigation、paint、longtask 等类型可全面监控页面加载、渲染、交互性能。实际项目中，应使用 PerformanceObserver 实时收集数据，聚焦关键指标（如 TTFB、LCP）进行聚合分析，并通过用户分群、趋势分析和可视化工具定位瓶颈。这一流程将性能优化从主观感知转化为量化科学，为提升用户体验提供坚实依据。