Performance API是一套使用JavaScript测量和评估
网站性能指标的标准。可以把它想象成一个盒子，里面包含了许多性能测试工具中提供的所有相同的功能，用于报告核心网站关键数据和一般性能统计数据。
网站建设的好坏与否我们首先想到的是性能，因此决定前往MDN重新审视性能API。我们可以使用它来报告页面元素的加载时间，甚至可以实时报告核心Web生命指标。让我们看看使用API报告一些CWV指标的几种方法。在我们开始之前，先简单介绍一下浏览器支持。性能API非常庞大，因为它包含许多不同的接口、属性和方法。虽然大多数浏览器都支持它，但基于Chromium的浏览器是唯一支持CWV所有特性的浏览器。唯一的另一个是Firefox，它支持第一个内容丰富的绘画（FCP）和最大的内容丰富的绘画（LCP）API属性。
首先我们需要数据访问，有两种主要方法来检索我们关心的性能指标：使用performance.getEntries()方法或使用PerformanceObserver实例。使用PerformanceObserver实例提供了一些重要的优势:PerformanceObserver观察绩效指标并随着时间的推移进行调度。相反，使用performance.getEntries()将始终返回自开始记录性能指标以来的整个条目列表。PerformanceObserver异步分派指标，这意味着他们不必阻止浏览器正在进行的操作。这element绩效指标类型不起作用与performance.getEntries()方法。
我们将一个空回调函数传递给PerformanceObserver构造函数。稍后，我们将对其进行更改，以便它能够根据观察到的性能指标进行实际操作。现在，让我们开始观察:该代码片段中第一件非常重要的事情是buffered: true财产。将此项设置为true意味着我们不仅能够观察到被调度的性能指标在...之后我们开始观察，但我们还想获得浏览器排队的性能指标以前我们开始观察。需要注意的第二件非常重要的事情是我们正在与largest-contentful-paint财产。这就是Performance API的酷之处:它可以用于测量非常具体的东西，而且还支持直接映射到CWV指标的属性。在查看其他CWV指标之前，我们将从LCP指标开始。
事实证明，我在最后一个示例中获得的第一幅绘画和FCP数据是相同的。因为第一次油漆可以任何事这可以防止屏幕空白例如背景颜色，我认为相同的结果意味着无论什么内容首先被绘制到屏幕上恰好也是第一个内容绘制。但这显然有更多的细微差别，因为Chrome根据使用的浏览器版本对FCP进行了不同的测量。谷歌保留了变更日志的完整记录供参考，因此在评估结果时要记住这一点，尤其是当你发现自己的结果与团队中的其他人不同时。
