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或相关指标。');
}这些指标共同构成了一幅完整的页面加载图景
