Performance API是浏览器内置的性能监控工具，通过window.performance提供高精度时间戳和页面加载、资源请求等数据。它包含Navigation Timing、Resource Timing、User Timing和Paint Timing等接口，可测量页面加载耗时、DOM渲染时间、关键渲染指标如FP和FCP，并支持自定义标记监控函数执行时间。结合PerformanceObserver和navigator.sendBeacon，能实现细粒度性能采集与上报，帮助分析白屏时间、资源阻塞等问题，支持多维度性能优化与告警。
前端性能监控是提升用户体验的关键环节，而浏览器提供的 Performance API 是实现这一目标的核心工具。它能帮助开发者精准测量页面加载、资源请求、脚本执行等关键阶段的耗时，从而定位性能瓶颈并进行针对性优化。
什么是 Performance API？
Performance API 是现代浏览器内置的一套接口，用于获取高精度的时间戳和页面性能相关数据。其核心对象是 window.performance，提供了一系列方法和属性，比如 performance.now() 可以获取毫秒级精确时间，比 Date.now() 更适合做性能测量。
更重要的是，Performance API 提供了多个子接口：
Navigation Timing：记录页面导航和加载各阶段的时间，如 DNS 查询、TCP 连接、DOM 解析等。Resource Timing：监控每个资源（JS、CSS、图片等）的请求过程。User Timing：允许开发者自定义标记和测量区间，比如标记某个函数执行开始与结束。Paint Timing：获取首次渲染（FP）和首次内容绘制（FCP）等关键渲染指标。
如何使用 Performance API 监控关键指标
通过以下代码可以快速获取页面加载的核心性能数据：
立即学习“前端免费学习笔记（深入）”；
function getPerformanceMetrics() { const perfData = performance.timing; const loadTime = perfData.loadEventEnd - perfData.navigationStart; const domReadyTime = perfData.domContentLoadedEventEnd - perfData.navigationStart;console.log(页面完全加载耗时: ${loadTime}ms);console.log(DOM ready 耗时: ${domReadyTime}ms);
// 使用 PerformanceObserver 获取更详细的条目const observer = new PerformanceObserver((list) => {list.getEntries().forEach((entry) => {if (entry.entryType === 'paint') {console.log(${entry.name}: ${entry.startTime}ms);}});});
observer.observe({ entryTypes: ['paint'] });}
getPerformanceMetrics();
这段代码输出的内容包括：
FP（First Paint）：页面首次像素渲染时间。FCP（First Contentful Paint）：首次渲染出文本、图片等内容的时间。结合 Navigation Timing 数据，可分析白屏时间、资源阻塞等问题。
利用 User Timing API 标记关键逻辑
除了系统自动采集的数据，你还可以手动标记代码中重要操作的执行时间：
启科网络PHP商城系统
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
0 查看详情
// 标记函数开始performance.mark('start-heavy-task');heavyComputation(); // 某个耗时操作
// 标记函数结束performance.mark('end-heavy-task');
// 测量耗时performance.measure('heavy-task-duration', 'start-heavy-task', 'end-heavy-task');
// 输出结果const measures = performance.getEntriesByType('measure');console.log(measures); // 打印耗时统计
这种方式非常适合监控复杂计算、组件渲染、API 请求处理等业务逻辑的性能表现。
性能数据上报与持续监控
采集到性能数据后，应定期上报到服务器进行聚合分析。例如在页面卸载前发送关键指标：
window.addEventListener('beforeunload', () => { const fcpEntry = performance.getEntriesByName('first-contentful-paint')[0]; if (fcpEntry) { navigator.sendBeacon('/log-performance', JSON.stringify({ fcp: fcpEntry.startTime, url: window.location.href, timestamp: Date.now() })); }});
navigator.sendBeacon 确保数据在页面关闭时仍能可靠发送，不会被中断。
结合后端系统，你可以实现：
按页面、设备、地区维度分析性能分布。设置性能阈值告警，及时发现异常。对比版本迭代前后的性能变化。
基本上就这些。合理使用 Performance API，不仅能掌握页面真实性能状况，还能为后续优化提供数据支撑。不复杂但容易忽略。
以上就是前端性能监控：使用Performance API_js性能优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/880367.html
微信扫一扫 
支付宝扫一扫 
