VisibilityStateEntry
VisibilityStateEntry 介面提供了頁面可見狀態更改的時間資訊，即選項卡從前臺變為後臺或從後臺變為前臺的時間。
這可以用於在效能時間線上精確定位可見性更改，並將其與其他效能條目（例如“first-contentful-paint”（參見 PerformancePaintTiming））進行交叉引用。
此 API 報告兩個關鍵的可見狀態更改時間：
visible：頁面變得可見的時間（即，當其選項卡移至前臺時）。hidden：頁面變為隱藏的時間（即，當其選項卡移至後臺時）。
效能時間線將始終有一個 `“visibility-state”` 條目，其 `startTime` 為 `0`，`name` 表示初始頁面可見狀態。
注意： 與其他 Performance API 一樣，此 API 擴充套件了 PerformanceEntry。
例項屬性
此介面沒有自己的屬性，但它透過以下方式限定和約束 PerformanceEntry 的屬性：
PerformanceEntry.entryType實驗性-
返回
“visibility-state”。 PerformanceEntry.name實驗性-
返回
“visible”或“hidden”。 PerformanceEntry.startTime實驗性-
返回可見狀態更改發生時的
timestamp。 PerformanceEntry.duration實驗性-
返回 0。
例項方法
此介面沒有方法。
示例
基本用法
以下函式可用於在控制檯中記錄所有 “visibility-state” 效能條目的表格：
js
function getVisibilityStateEntries() {
const visibilityStateEntries =
performance.getEntriesByType("visibility-state");
console.table(visibilityStateEntries);
}
將可見狀態更改與繪製時序相關聯
下面的函式獲取對所有 “visibility-state” 條目和 “first-contentful-paint” 條目的引用，然後使用 Array.some() 測試是否有任何 “hidden” 可見性條目發生在首次內容繪製之前。
js
function wasHiddenBeforeFirstContentfulPaint() {
const fcpEntry = performance.getEntriesByName("first-contentful-paint")[0];
const visibilityStateEntries =
performance.getEntriesByType("visibility-state");
return visibilityStateEntries.some(
(e) => e.startTime < fcpEntry.startTime && e.name === "hidden",
);
}
規範
| 規範 |
|---|
| HTML # the-visibilitystateentry-interface |
瀏覽器相容性
載入中…