PerformancePaintTiming
Baseline 廣泛可用 *
PerformancePaintTiming 介面提供有關網頁構建期間“繪製”（也稱為“渲染”）操作的計時資訊。“繪製”是指將渲染樹轉換為螢幕畫素。
此 API 提供兩個關鍵的繪製時間點：
第三個關鍵繪製時間點由 LargestContentfulPaint API 提供。
- 最大內容繪製 (LCP)：在視口中可見的最大影像或文字塊的渲染時間，從頁面開始載入時開始記錄。
此 API 提供的資料有助於您最大程度地減少使用者等待內容開始顯示的時間。縮短這些關鍵繪製時間點的時間，可以讓網站對使用者感覺更具響應性、效能更優、更吸引人。
與其他 Performance API 一樣，此 API 擴充套件了 PerformanceEntry。
例項屬性
此介面沒有自己的屬性，但透過以下方式限定和約束 PerformanceEntry 的屬性：
PerformanceEntry.entryType-
返回
"paint"。 PerformanceEntry.name-
返回
"first-paint"或"first-contentful-paint"。 PerformanceEntry.startTime-
返回繪製發生時的
timestamp。 PerformanceEntry.duration-
返回 0。
例項方法
此介面沒有方法。
示例
獲取繪製計時
使用 PerformanceObserver 的示例，它會在 paint 效能條目被記錄到瀏覽器的效能時間線時通知您。使用 buffered 選項可以訪問觀察者建立之前的條目。
js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(
`The time to ${entry.name} was ${entry.startTime} milliseconds.`,
);
// Logs "The time to first-paint was 386.7999999523163 milliseconds."
// Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});
});
observer.observe({ type: "paint", buffered: true });
使用 Performance.getEntriesByType() 的示例，它僅顯示呼叫此方法時存在於瀏覽器效能時間線中的 paint 效能條目。
js
const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
console.log(`The time to ${entry.name} was ${entry.startTime} milliseconds.`);
// Logs "The time to first-paint was 386.7999999523163 milliseconds."
// Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});
規範
| 規範 |
|---|
| 繪製計時 # sec-PerformancePaintTiming |
瀏覽器相容性
載入中…