Performance API可精准采集FP、FCP、LCP、FID、TTFB等核心性能指标，通过performance.timing、getEntries()及PerformanceObserver获取页面加载与交互数据，结合mark打点和measure测量自定义逻辑耗时，利用sendBeacon上报关键数据，实现轻量高效的前端性能监控。
前端性能直接影响用户体验，尤其在复杂应用中，页面加载慢或交互卡顿会显著降低用户留存。利用浏览器原生的 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 时间：
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === ‘first-contentful-paint’) {
console.log(‘FCP:’, entry.startTime);
}
}
});
observer.observe({ entryTypes: [‘paint’] });
监控资源加载与自定义标记
除了页面整体性能，还可以监控脚本、样式、图片等资源的加载情况：
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进行前端性能监控的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538868.html
微信扫一扫 
支付宝扫一扫 
