Performance API是一套使用JavaScript測量和評估網(wǎng)站性能指標的標準。可以把它想象成一個盒子，里面包含了許多性能測試工具中提供的所有相同的功能，用于報告核心網(wǎng)站關鍵數(shù)據(jù)和一般性能統(tǒng)計數(shù)據(jù)。

網(wǎng)站建設的好壞與否我們首先想到的是性能，因此決定前往MDN重新審視性能API。我們可以使用它來報告頁面元素的加載時間，甚至可以實時報告核心Web生命指標。讓我們看看使用API報告一些CWV指標的幾種方法。在我們開始之前，先簡單介紹一下瀏覽器支持。性能API非常龐大，因為它包含許多不同的接口、屬性和方法。雖然大多數(shù)瀏覽器都支持它，但基于Chromium的瀏覽器是唯一支持CWV所有特性的瀏覽器。唯一的另一個是Firefox，它支持第一個內容豐富的繪畫（FCP）和最大的內容豐富的繪畫（LCP）API屬性。

首先我們需要數(shù)據(jù)訪問，有兩種主要方法來檢索我們關心的性能指標：使用performance.getEntries()方法或使用PerformanceObserver實例。使用PerformanceObserver實例提供了一些重要的優(yōu)勢:PerformanceObserver觀察績效指標并隨著時間的推移進行調度。相反，使用performance.getEntries()將始終返回自開始記錄性能指標以來的整個條目列表。PerformanceObserver異步分派指標，這意味著他們不必阻止瀏覽器正在進行的操作。這element績效指標類型不起作用與performance.getEntries()方法。

我們將一個空回調函數(shù)傳遞給PerformanceObserver構造函數(shù)。稍后，我們將對其進行更改，以便它能夠根據(jù)觀察到的性能指標進行實際操作。現(xiàn)在，讓我們開始觀察:該代碼片段中第一件非常重要的事情是buffered: true財產(chǎn)。將此項設置為true意味著我們不僅能夠觀察到被調度的性能指標在...之后我們開始觀察，但我們還想獲得瀏覽器排隊的性能指標以前我們開始觀察。需要注意的第二件非常重要的事情是我們正在與largest-contentful-paint財產(chǎn)。這就是Performance API的酷之處:它可以用于測量非常具體的東西，而且還支持直接映射到CWV指標的屬性。在查看其他CWV指標之前，我們將從LCP指標開始。

事實證明，我在最后一個示例中獲得的第一幅繪畫和FCP數(shù)據(jù)是相同的。因為第一次油漆可以任何事這可以防止屏幕空白例如背景顏色，我認為相同的結果意味著無論什么內容首先被繪制到屏幕上恰好也是第一個內容繪制。但這顯然有更多的細微差別，因為Chrome根據(jù)使用的瀏覽器版本對FCP進行了不同的測量。谷歌保留了變更日志的完整記錄供參考，因此在評估結果時要記住這一點，尤其是當你發(fā)現(xiàn)自己的結果與團隊中的其他人不同時。