VisibilityStateEntry

实验性： 这是一个 实验性技术
在生产环境中使用此技术之前，请仔细查看 浏览器兼容性表格。

VisibilityStateEntry 接口提供了页面可见性状态更改的时间信息，即当选项卡从前台切换到后台或反之亦然时。

这可以用于在性能时间线上精确定位可见性更改，并将其与其他性能条目（如“first-contentful-paint”（参见 PerformancePaintTiming））交叉引用。

此 API 报告了两个关键的可见性状态更改时间

  • visible：页面变为可见的时间（即当其选项卡移动到前台时）。
  • hidden：页面变为隐藏的时间（即当其选项卡移动到后台时）。

性能时间线将始终包含一个“visibility-state”条目，其startTime为0，并且name表示初始页面可见性状态。

注意：与其他 Performance API 一样，此 API 扩展了 PerformanceEntry。

PerformanceEntry VisibilityStateEntry

实例属性

此接口没有属性，但它通过以下方式限定和约束扩展了 PerformanceEntry 的属性

PerformanceEntry.entryType

返回“visibility-state”。

PerformanceEntry.name

返回"visible"或"hidden"。

PerformanceEntry.startTime

返回可见性状态更改发生时的 时间戳。

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

页面可见性 API