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 |
浏览器兼容性
加载中…