Performance API通过navigation和resource类型数据及PerformanceObserver，精准分析页面加载各阶段耗时与用户体验指标。
说起网站性能，大家最直观的感受往往就是“快不快”。而“快”这个词背后，其实藏着一整套精密的测量体系。Performance API，在我看来，就是前端开发者手里的那把瑞士军刀，它能让我们不只是凭感觉说页面慢，而是能精确地拆解页面加载的每一个环节，从网络请求到DOM渲染，每一步耗时多少，一目了然。这些细致入微的数据，正是我们识别性能瓶颈、制定优化策略的根本依据。没有它，我们的优化可能就是盲人摸象，有了它，我们才能真正做到有的放矢。
解决方案
那么，具体怎么用这把“瑞士军刀”呢？最核心的，莫过于
performance.getEntriesByType('navigation')
和
performance.getEntriesByType('resource')
这两个方法，再加上
PerformanceObserver
来监听一些更现代的指标。
navigation
类型的条目，它记录了整个文档从发起请求到完全加载的所有关键时间点。这就像一张详细的航海日志，记录了你的船从港口出发到靠岸的每一步。
// 随便找个地方运行这段代码，比如控制台，就能看到一些基础数据const navEntries = performance.getEntriesByType('navigation');if (navEntries.length > 0) { const navTiming = navEntries[0]; console.log('--- 页面导航主要时间点 ---'); console.log(`页面总加载时间 (从导航开始到load事件结束): ${(navTiming.loadEventEnd - navTiming.startTime).toFixed(2)} ms`); console.log(`DNS查询耗时: ${(navTiming.domainLookupEnd - navTiming.domainLookupStart).toFixed(2)} ms`); console.log(`TCP连接耗时: ${(navTiming.connectEnd - navTiming.connectStart).toFixed(2)} ms`); console.log(`请求响应耗时 (TTFB - Time To First Byte): ${(navTiming.responseStart - navTiming.requestStart).toFixed(2)} ms`); console.log(`DOM内容加载完成 (DOMContentLoaded): ${(navTiming.domContentLoadedEventEnd - navTiming.startTime).toFixed(2)} ms`); console.log(`所有资源加载完成 (loadEventEnd): ${(navTiming.loadEventEnd - navTiming.startTime).toFixed(2)} ms`);} else { console.log('当前页面没有导航性能条目，可能不是主文档加载。');}
这段代码揭示了从用户点击链接（或者直接输入URL）那一刻起，到页面所有内容（包括图片、CSS、JS等）都加载并执行完毕的整个过程。你会看到DNS解析花了多久，TCP握手用了多久，服务器响应第一个字节用了多久（TTFB），以及DOM树构建和所有资源加载完毕的时间。
光看整体还不够，有时候我们需要知道是哪个具体资源拖了后腿。这时候，
performance.getEntriesByType('resource')
就派上用场了。它会列出页面加载的所有外部资源，比如图片、脚本、样式表、字体等等，以及它们各自的加载耗时。
console.log('n--- 页面资源加载详情 ---');performance.getEntriesByType('resource').forEach(resource => { // 过滤掉一些不那么重要的或者AJAX请求，专注于页面渲染相关的资源 if (!['xmlhttprequest', 'fetch', 'beacon', 'img', 'script', 'link', 'css', 'font'].includes(resource.initiatorType)) { return; } // 简单展示，实际可以根据需求筛选和排序 console.log(`资源: ${resource.name.substring(0, 80)}..., 类型: ${resource.initiatorType}, 耗时: ${resource.duration.toFixed(2)} ms`);});
但话说回来，这些指标虽然精确，却不总是和用户感受完全同步。用户可不会等到
loadEventEnd
才觉得页面“加载完成”了。他们更关心的是，什么时候能看到内容？什么时候能交互？这就引出了像FCP（First Contentful Paint）和LCP（Largest Contentful Paint）这样的用户体验指标。这些需要通过
PerformanceObserver
来监听。
if ('PerformanceObserver' in window) { const observer = new PerformanceObserver((list) => { list.getEntries().forEach(entry => { if (entry.name === 'first-contentful-paint') { console.log(`n首次内容绘制 (FCP): ${entry.startTime.toFixed(2)} ms - 用户首次看到页面内容的时间点`); } else if (entry.name === 'largest-contentful-paint') { console.log(`最大内容绘制 (LCP): ${entry.startTime.toFixed(2)} ms - 页面主要内容（通常是最大图片或文本块）渲染完成的时间点`); } }); }); // 观察'paint'事件获取FCP，观察'largest-contentful-paint'获取LCP observer.observe({ entryTypes: ['paint', 'largest-contentful-paint'] });} else { console.log('当前浏览器不支持PerformanceObserver或相关指标。');}
这些指标共同构成了一幅完整的页面加载图景
以上就是如何通过性能API测量页面加载时间，以及这些指标在实际优化中的应用方法有哪些？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521575.html
微信扫一扫 
支付宝扫一扫 
