关于JavaScript中的window.performance

在Web开发中，了解如何测量网页性能是非常重要的。window.performance对象可以提供有关网页加载速度方面的详细信息。让我们来看看如何使用它。

window.performance对象

window.performance是一个只读的Web API，它允许开发者访问有关当前网页性能方面的信息。该对象提供了以下信息：

• Navigation Timing：有关导航（浏览器加载文档时）的信息，例如文档加载时间、DOMContentLoaded事件的发生时间等。
• Resource Timing：有关获取每个资源（如图像、样式表或脚本）的时间信息。
• User Timing：允许您记录自己的自定义指标。例如，您可以在代码中为某些操作添加时间戳，以便在您的性能测量中进行跟踪。

使用performance对象

Navigation Timing

以下是如何使用Navigation Timing API来获取文档加载时间的示例：

function l() {
  return window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
}

该代码返回文档加载时间（以毫秒为单位）。在页面加载完成时调用该函数即可。

Resource Timing

以下是如何使用Resource Timing API来获取资源加载信息的示例：

function getResourceTiming() {
  const resources = window.performance.getEntriesByType("resource");
  resources.forEach((resource) => {
    console.log(`Resource URL: ${resource.name}`);
    console.log(`Start Time: ${resource.startTime}`);
    console.log(`Duration: ${resource.duration}`);
  });
}

该函数将打印所有资源的URL、开始时间和持续时间。在页面加载完成后调用该函数即可。

User Timing

以下是如何使用User Timing API来记录自定义指标的示例：

function measureSomething() {
  window.performance.mark("start_measure");
  // Code to measure goes here
  window.performance.mark("end_measure");
  window.performance.measure("measure_name", "start_measure", "end_measure");
  const measures = window.performance.getEntriesByName("measure_name");
  console.log(`Duration of measure: ${measures[0].duration}`);
}

该函数使用window.performance.mark()来记录测量开始和结束时间戳。然后，它使用window.performance.measure()来计算持续时间。最后，我们可以使用window.performance.getEntriesByName()来获取持续时间并将其打印到控制台上。

总结

在本文中，我们已经介绍了如何使用window.performance对象来获取有关页面加载时间、资源加载时间和自定义指标的信息。此外，我们还提供了示例代码帮助您了解如何使用这些信息。

注意：以上示例代码仅用于演示目的。在生产代码中，请谨慎使用window.performance对象，以确保性能不受影响。