请解释如何使用 Resource Timing API 测量资源加载性能？

推荐答案

// www.javascriptcn.com code example
// 获取所有资源的性能条目
const resources = performance.getEntriesByType("resource");

// 遍历资源条目并分析加载时间
resources.forEach(resource => {
    console.log(`Resource: ${resource.name}`);
    console.log(`Duration: ${resource.duration} ms`);
    console.log(`Start Time: ${resource.startTime} ms`);
    console.log(`Redirect Time: ${resource.redirectEnd - resource.redirectStart} ms`);
    console.log(`DNS Lookup Time: ${resource.domainLookupEnd - resource.domainLookupStart} ms`);
    console.log(`TCP Handshake Time: ${resource.connectEnd - resource.connectStart} ms`);
    console.log(`Request Time: ${resource.responseStart - resource.requestStart} ms`);
    console.log(`Response Time: ${resource.responseEnd - resource.responseStart} ms`);
});

本题详细解读

Resource Timing API 简介

Resource Timing API 是 Web Performance API 的一部分，它允许开发者获取页面中所有资源的详细加载时间信息。通过这个 API，开发者可以精确测量资源加载的各个阶段所花费的时间，从而优化页面性能。

关键性能指标

• duration: 资源加载的总时间。
• startTime: 资源加载开始的时间。
• redirectTime: 重定向时间（如果有重定向）。
• dnsLookupTime: DNS 查询时间。
• tcpHandshakeTime: TCP 握手时间。
• requestTime: 请求时间（从请求开始到接收到第一个字节的时间）。
• responseTime: 响应时间（从接收到第一个字节到最后一个字节的时间）。

使用步骤

1. 获取资源条目: 使用 performance.getEntriesByType("resource") 获取所有资源的性能条目。
2. 遍历资源条目: 遍历每个资源条目，提取并分析各个时间指标。
3. 输出或记录结果: 将结果输出到控制台或记录到日志中，以便进一步分析。

示例代码解析

• performance.getEntriesByType("resource"): 获取所有资源的性能条目。
• resource.name: 资源的 URL。
• resource.duration: 资源加载的总时间。
• resource.startTime: 资源加载开始的时间。
• resource.redirectEnd - resource.redirectStart: 计算重定向时间。
• resource.domainLookupEnd - resource.domainLookupStart: 计算 DNS 查询时间。
• resource.connectEnd - resource.connectStart: 计算 TCP 握手时间。
• resource.responseStart - resource.requestStart: 计算请求时间。
• resource.responseEnd - resource.responseStart: 计算响应时间。

通过这些指标，开发者可以深入了解资源加载的性能瓶颈，从而进行针对性的优化。