使用 Resource Timing API 深入了解前端性能。学习如何聚合和分析资源计时数据以优化加载性能。
前端性能 API 资源计时聚合：加载性能分析
在追求提供卓越用户体验的过程中，优化前端性能至关重要。这种优化的一个关键方面在于理解资源在您的网站或应用程序上是如何加载的。Resource Timing API 作为更广泛的 Performance API 套件的一部分，为浏览器获取的每个资源提供了详细的计时见解。这些信息对于识别瓶颈和提高整体加载性能非常有价值。本综合指南将探讨如何利用 Resource Timing API，聚合其数据，并将其用于加载性能分析。
了解 Resource Timing API
Resource Timing API 为网页加载的资源（如图像、脚本、样式表和其他资产）提供详细的计时信息。这包括以下指标：
- 发起者类型： 发起请求的元素类型（例如，'img', 'script', 'link'）。
- 名称： 资源的 URL。
- 开始时间： 浏览器开始获取资源的时间戳。
- 抓取开始： 浏览器从磁盘缓存或网络开始获取资源之前的时间戳。
- 域名查询开始/结束： DNS 查询过程开始和结束的时间戳。
- 连接开始/结束： 与服务器建立 TCP 连接开始和结束的时间戳。
- 请求开始/结束： HTTP 请求开始和结束的时间戳。
- 响应开始/结束： HTTP 响应开始和结束的时间戳。
- 传输大小： 传输的资源大小（以字节为单位）。
- 编码后主体大小： 编码后（例如 GZIP 压缩）的资源主体大小。
- 解码后主体大小： 解码后的资源主体大小。
- 持续时间： 获取资源所花费的总时间（responseEnd - startTime）。
这些指标让开发人员能够精确定位可以进行性能改进的具体领域。例如，较长的 DNS 查询时间可能建议更换为更快的 DNS 提供商或利用 CDN。缓慢的连接时间可能表示网络拥塞或服务器端问题。较大的传输大小可能突显了图像优化或代码压缩的机会。
访问资源计时数据
Resource Timing API 通过 JavaScript 中的 performance 对象进行访问：
const resourceTimingEntries = performance.getEntriesByType("resource");
resourceTimingEntries.forEach(entry => {
console.log(entry.name, entry.duration);
});
此代码片段检索所有资源计时条目，并将每个资源的名称和持续时间记录到控制台。请注意，出于安全原因，浏览器可能会限制 Resource Timing API 提供的详细程度。这通常由 timingAllowOrigin 标头控制，该标头允许跨域资源公开其计时信息。
聚合资源计时数据
原始的资源计时数据很有用，但要获得可操作的见解，需要对其进行聚合和分析。聚合涉及对数据进行分组和汇总，以识别趋势和模式。这可以通过几种方式完成：
按资源类型
按类型（例如，图像、脚本、样式表）对资源进行分组，可以比较每个类别的平均加载时间。这可以揭示某些类型的资源是否一贯比其他资源慢。
const resourceTypes = {};
resourceTimingEntries.forEach(entry => {
const initiatorType = entry.initiatorType;
if (!resourceTypes[initiatorType]) {
resourceTypes[initiatorType] = {
count: 0,
totalDuration: 0,
averageDuration: 0
};
}
resourceTypes[initiatorType].count++;
resourceTypes[initiatorType].totalDuration += entry.duration;
});
for (const type in resourceTypes) {
resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
console.log(type, resourceTypes[type].averageDuration);
}
此代码计算每种资源类型的平均加载时间并将其记录到控制台。例如，您可能会发现图像的平均加载时间明显高于脚本，这表明需要进行图像优化。
按域名
按域名对资源进行分组，可以评估不同内容分发网络（CDN）或第三方服务的性能。这可以帮助您识别性能缓慢的域名并考虑替代提供商。
const resourceDomains = {};
resourceTimingEntries.forEach(entry => {
const domain = new URL(entry.name).hostname;
if (!resourceDomains[domain]) {
resourceDomains[domain] = {
count: 0,
totalDuration: 0,
averageDuration: 0
};
}
resourceDomains[domain].count++;
resourceDomains[domain].totalDuration += entry.duration;
});
for (const domain in resourceDomains) {
resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
console.log(domain, resourceDomains[domain].averageDuration);
}
此代码计算每个域名的平均加载时间并将其记录到控制台。如果您注意到某个特定的 CDN 持续缓慢，您可能需要调查其性能或更换为其他提供商。例如，考虑一个您同时使用 Cloudflare 和 Akamai 的场景。这种聚合将允许您在特定上下文中直接比较它们的性能。
按页面
按页面（或路由）聚合数据，可以识别性能特别差的页面。这可以帮助您优先进行优化工作，并专注于对用户体验影响最大的页面。
这通常需要与您的应用程序路由系统集成。您需要将每个资源计时条目与当前页面 URL 或路由关联起来。具体实现将根据您使用的框架（例如 React、Angular、Vue.js）而有所不同。
创建自定义指标
除了 Resource Timing API 提供的标准指标外，您还可以创建自定义指标来跟踪应用程序性能的特定方面。例如，您可能希望测量加载特定组件或渲染特定元素所需的时间。
这可以通过使用 performance.mark() 和 performance.measure() 方法来实现：
performance.mark('component-start');
// Load the component
performance.mark('component-end');
performance.measure('component-load', 'component-start', 'component-end');
const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;
console.log('Component load time:', componentLoadTime);
此代码片段测量加载组件所需的时间并将其记录到控制台。然后，您可以像聚合标准 Resource Timing API 指标一样聚合这些自定义指标。
分析资源计时数据以获取性能见解
一旦您聚合了资源计时数据，就可以用它来确定性能改进的具体领域。以下是一些常见场景和潜在的解决方案：
DNS 查询时间过长
- 原因： DNS 服务器慢、DNS 服务器距离远、DNS 查询不频繁。
- 解决方案： 更换为更快的 DNS 提供商（例如 Cloudflare, Google Public DNS），利用 CDN 将 DNS 记录缓存到离用户更近的地方，实施 DNS 预取。
- 示例： 一个面向全球用户的网站在某些地区加载时间缓慢。对资源计时数据的分析显示，这些地区的 DNS 查询时间很长。更换为具有全球 DNS 服务器的 CDN 后，显著减少了 DNS 查询时间并提高了整体性能。
连接时间缓慢
- 原因： 网络拥塞、服务器端问题、防火墙干扰。
- 解决方案： 优化服务器基础设施，使用 CDN 将内容分发到离用户更近的地方，配置防火墙以实现高效通信。
- 示例： 一个电子商务网站在购物高峰时段连接时间缓慢。对资源计时数据的分析指出服务器过载是主要原因。升级服务器硬件和优化数据库查询后，改善了连接时间，并防止了在流量高峰期性能下降。
传输大小过大
- 原因： 未优化的图像、未压缩的代码、不必要的资产。
- 解决方案： 优化图像（例如，压缩、调整大小、使用现代格式如 WebP），压缩 JavaScript 和 CSS 代码，移除未使用的代码和资产，启用 GZIP 或 Brotli 压缩。
- 示例： 一个新闻网站使用了大量未优化的图像，显著增加了页面加载时间。使用 ImageOptim 等工具优化图像并实施懒加载后，减少了图像传输大小并改善了页面加载性能。
- 国际化考量： 确保图像优化考虑到不同地区常见的不同屏幕尺寸和分辨率。
服务器响应时间缓慢
- 原因： 低效的服务器端代码、数据库瓶颈、网络延迟。
- 解决方案： 优化服务器端代码，提高数据库性能，使用 CDN 将内容缓存到离用户更近的地方，实施 HTTP 缓存。
- 示例： 一个社交媒体平台由于低效的数据库查询而导致服务器响应时间缓慢。优化数据库查询并实施缓存机制后，显著减少了服务器响应时间并提高了整体性能。
渲染阻塞资源
- 原因： 同步的 JavaScript 和 CSS 阻塞了页面的渲染。
- 解决方案： 推迟加载非关键的 JavaScript，内联关键的 CSS，对脚本使用异步加载，消除未使用的 CSS。
- 示例： 一个博客网站使用了一个大型的、渲染阻塞的 CSS 文件，导致页面初始渲染延迟。内联关键 CSS 并推迟加载非关键 CSS 后，改善了网站的感知性能。
将资源计时数据集成到性能监控工具中
手动收集和分析资源计时数据可能非常耗时。幸运的是，一些性能监控工具可以自动化此过程，并提供对您网站性能的实时见解。这些工具通常在后台收集资源计时数据，并以用户友好的仪表板形式呈现。
支持资源计时数据的流行性能监控工具包括：
- Google PageSpeed Insights： 根据各种性能指标（包括资源计时数据）提供提高页面速度的建议。
- WebPageTest： 允许您从不同地点和浏览器测试网站性能，提供详细的资源计时信息。
- New Relic： 提供全面的性能监控功能，包括实时资源计时数据和可视化。
- Datadog： 在提供更广泛的基础设施和应用程序监控的同时，提供详细的资源计时指标，从而提供性能的整体视图。
- Sentry： 主要关注错误跟踪，Sentry 也提供性能监控功能，包括资源计时数据，以将性能问题与特定错误关联起来。
- Lighthouse： 一个用于提高网页质量的开源自动化工具。它对性能、可访问性、渐进式 Web 应用、SEO 等进行审计。可以从 Chrome DevTools、命令行或作为 Node 模块运行。
通过将资源计时数据集成到这些工具中，您可以更深入地了解网站的性能，并更有效地确定改进领域。
道德考量和用户隐私
在收集和分析资源计时数据时，必须考虑道德影响和用户隐私。对用户透明地说明您收集的数据及其用途。确保您遵守相关的隐私法规，如 GDPR 和 CCPA。
避免收集个人身份信息（PII），并在可能的情况下对数据进行匿名化或假名化处理。实施适当的安全措施以保护数据免遭未经授权的访问或泄露。考虑为用户提供选择退出性能监控的选项。
先进技术和未来趋势
Resource Timing API 正在不断发展，新的功能和技术正在涌现，以进一步增强前端性能分析。以下是一些值得关注的先进技术和未来趋势：
Server Timing API
Server Timing API 允许服务器公开有关其处理请求的时间信息。这些信息可以与资源计时数据相结合，以提供更完整的端到端性能图景。
Long Tasks API
Long Tasks API 识别长时间阻塞主线程的任务，这些任务会导致 UI 卡顿和响应性问题。这些信息可用于优化 JavaScript 代码并改善用户体验。
WebAssembly (Wasm)
WebAssembly 是一种用于虚拟机的二进制指令格式，可在浏览器中实现接近本机的性能。将 Wasm 用于性能关键任务可以显著提高加载时间和整体性能。
HTTP/3
HTTP/3 是 HTTP 协议的最新版本，它使用 QUIC 传输协议来提供更高的性能和可靠性。HTTP/3 相比 HTTP/2 具有多项优势，包括减少延迟和改善连接管理。
结论
Resource Timing API 是一个用于理解和优化前端性能的强大工具。通过聚合和分析资源计时数据，您可以识别瓶颈、缩短加载时间并提供更好的用户体验。无论您是经验丰富的前端开发人员还是新手，掌握 Resource Timing API 对于构建高性能 Web 应用程序都至关重要。拥抱数据驱动优化的力量，释放您网站或应用程序的全部潜力。在收集和分析性能数据时，请记住优先考虑用户隐私和道德考量。通过随时了解最新的趋势和技术，您可以确保您的网站在未来几年内保持快速、响应迅速和用户友好。利用这些技术和工具将有助于构建一个性能更高、全球可访问的 Web。
可行的见解： 从按资源类型和域名实现基本的资源计时聚合开始。这可以立即为您提供关于性能瓶颈所在的见解。然后，与 Google PageSpeed Insights 或 WebPageTest 等性能监控工具集成，以自动化数据收集和分析。