使用Performance API进行前端性能监控-js教程-PHP中文网

使用Performance API进行前端性能监控

幻影之瞳

发布： 2025-11-14 22:48:06

原创

420人浏览过

Performance API可精准采集FP、FCP、LCP、FID、TTFB等核心性能指标，通过performance.timing、getEntries()及PerformanceObserver获取页面加载与交互数据，结合mark打点和measure测量自定义逻辑耗时，利用sendBeacon上报关键数据，实现轻量高效的前端性能监控。

使用performance api进行前端性能监控

前端性能直接影响用户体验，尤其在复杂应用中，页面加载慢或交互卡顿会显著降低用户留存。利用浏览器原生的 Performance API，我们可以精准采集关键性能指标，实现轻量高效的性能监控。

什么是 Performance API

Performance API 是浏览器提供的用于测量网页性能的一组接口，属于 W3C High Resolution Time 标准的一部分。它提供高精度的时间戳（纳秒级），并记录页面生命周期中的关键节点。

核心对象是 window.performance，其中最常用的是 performance.timing 和 performance.getEntries()，以及更现代的 PerformanceObserver。

采集关键性能指标

通过 Performance API 可获取多个重要时间点，进而计算出反映用户体验的核心指标：

立即学习“前端免费学习笔记（深入）”；

FP (First Paint)：页面首次绘制像素的时间，表示开始渲染内容。
FCP (First Contentful Paint)：首次渲染文本、图片等有意义内容的时间。
LCP (Largest Contentful Paint)：最大内容元素渲染完成的时间，衡量加载体验。
FID (First Input Delay)：用户首次交互到响应的时间，反映页面响应性。
TTFB (Time to First Byte)：从请求开始到收到第一个字节的时间。

例如，获取 FCP 时间：

监控资源加载与自定义标记

除了页面整体性能，还可以监控脚本、样式、图片等资源的加载情况：

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

performance.getEntriesByType('resource').forEach(res => {
console.log(`${res.name}: 加载耗时 ${res.duration}ms`);
});

对于异步操作或特定业务逻辑，可使用 performance.mark() 手动打点：

performance.mark('start-api-call');
fetch('/api/data').then(() => {
performance.mark('end-api-call');
performance.measure('api-duration', 'start-api-call', 'end-api-call');
});

之后通过 performance.getEntriesByType('measure') 获取测量结果。

上报性能数据

采集到的数据可通过 navigator.sendBeacon() 在页面卸载前发送给服务端，确保数据不丢失：

function sendPerformanceData() {
const data = JSON.stringify(performance.getEntries());
navigator.sendBeacon('/log', data);
}
window.addEventListener('beforeunload', sendPerformanceData);

建议只上报关键指标，避免传输大量原始数据。可在上报前聚合处理，提取 FP、FCP、LCP 等核心值。

基本上就这些。Performance API 轻量、标准、无需额外依赖，结合合理的打点和上报策略，能有效帮助团队持续优化前端性能。

以上就是使用Performance API进行前端性能监控的详细内容，更多请关注php中文网其它相关文章！