SVG window.performance 属性

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用 XML 描述二维图形和绘图程序的语言。在 SVG 里，您可以使用各种形状、线条、文本、图像和动画来创建图形。而 window.performance 属性则是用于测量网页性能的接口。

什么是 window.performance 属性？

window.performance 属性是一个 Web API 提供的接口，用于提供有关网页性能的信息。它包含许多有用的方法和属性，使开发人员能够测量、监视和优化其网站的性能。

SVG 中的 window.performance 属性

尽管 SVG 不是网页，但它仍然可以使用 window.performance 属性来测量其性能表现。SVG 图像可以通过 JavaScript 动态创建和操作，因此同样受益于这些性能测量工具。

SVG 中可用的 window.performance 属性包括：

• performance.now()：返回自页面加载完成以来经过的毫秒数。此方法可以用于测量操作的执行时间或动画的帧速率。

• performance.timing：返回有关页面加载期间各个事件的详细信息，例如 DOM 完全加载的时间、解析文档所花费的时间等等。

如何使用 window.performance 属性？

要使用 window.performance 属性，请在 JavaScript 中对其进行引用。例如，要测量某个操作的执行时间，您可以使用以下代码：

const start = performance.now();
// 运行一些代码
const end = performance.now();
console.log(`代码运行了 ${end - start} 毫秒`);

要访问 performance.timing，请使用以下代码：

console.log(performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart);

此代码将返回页面 DOM 完全加载的时间，以毫秒为单位。您还可以使用 performance.timing 访问其他有关页面加载期间事件的详细信息。

总结

window.performance 属性是一个有用的工具，可帮助您测量和优化网站或应用程序的性能。SVG 支持的 window.performance 属性包括 performance.now() 和 performance.timing，它们可以帮助您测量操作的执行时间、动画的帧速率及页面加载期间各个事件的详细信息。