如何通过性能API测量页面加载时间，以及这些指标在实际优化中的应用方法有哪些？-js教程-PHP中文网

如何通过性能API测量页面加载时间，以及这些指标在实际优化中的应用方法有哪些？

夢幻星辰

发布： 2025-09-21 19:19:01

原创

1001人浏览过

Performance API通过navigation和resource类型数据及PerformanceObserver，精准分析页面加载各阶段耗时与用户体验指标。

如何通过性能api测量页面加载时间，以及这些指标在实际优化中的应用方法有哪些？

说起网站性能，大家最直观的感受往往就是“快不快”。而“快”这个词背后，其实藏着一整套精密的测量体系。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树构建和所有资源加载完毕的时间。

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

光看整体还不够，有时候我们需要知道是哪个具体资源拖了后腿。这时候，

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测量页面加载时间，以及这些指标在实际优化中的应用方法有哪些？的详细内容，更多请关注php中文网其它相关文章！