请解释如何使用 Navigation Timing API 测量页面加载性能？

推荐答案

// www.javascriptcn.com code example
// 使用 Navigation Timing API 测量页面加载性能
function measurePageLoadTime() {
    const timing = window.performance.timing;

    // 计算页面加载时间
    const loadTime = timing.loadEventEnd - timing.navigationStart;

    console.log(`页面加载时间: ${loadTime}ms`);
}

// 在页面加载完成后调用
window.onload = measurePageLoadTime;

本题详细解读

什么是 Navigation Timing API？

Navigation Timing API 是浏览器提供的一个接口，用于测量页面加载过程中的各个阶段的时间点。通过这些时间点，开发者可以精确地计算出页面加载的各个阶段所花费的时间，从而优化页面性能。

如何使用 Navigation Timing API 测量页面加载性能？

1. 获取 timing 对象：

   • 通过 window.performance.timing 可以获取到包含页面加载各个阶段时间点的 timing 对象。

2. 计算页面加载时间：

   • 页面加载时间可以通过 timing.loadEventEnd - timing.navigationStart 来计算。navigationStart 表示页面开始加载的时间点，loadEventEnd 表示页面加载完成的时间点。

3. 输出结果：

   • 将计算出的页面加载时间输出到控制台，或者根据需要存储到日志中。

关键时间点解释：

• navigationStart：页面开始加载的时间点。
• loadEventEnd：页面加载完成的时间点。

示例代码：

// www.javascriptcn.com code example
function measurePageLoadTime() {
    const timing = window.performance.timing;

    // 计算页面加载时间
    const loadTime = timing.loadEventEnd - timing.navigationStart;

    console.log(`页面加载时间: ${loadTime}ms`);
}

// 在页面加载完成后调用
window.onload = measurePageLoadTime;

通过以上代码，开发者可以轻松测量页面的加载时间，并根据结果进行性能优化。