ContentVisibilityAutoStateChangeEvent

Baseline 2024

Newly available

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

ContentVisibilityAutoStateChangeEvent 接口是 contentvisibilityautostatechange 事件的对象。对于设置了 content-visibility: auto 的任意元素,在元素开始或不再与用户相关,且正在跳过其内容时触发此事件。

在元素不再与用户相关时(在开始和结束事件之间),用户代理会跳过元素的渲染(包括布局和绘制),这可以显著提高页面渲染速度。contentvisibilityautostatechange 事件为应用代码在不需要时开始或停止渲染过程(如在 <canvas> 上绘画)提供了便利,进而节约了处理能力。

注意因为元素内容即使被隐藏不可见也仍将保持语义相关性(例如使用辅助技术的用户),所以不应使用此事件跳过重要的 DOM 语义更新。

Event ContentVisibilityAutoStateChangeEvent

构造函数

ContentVisibilityAutoStateChangeEvent()

创建新的 ContentVisibilityAutoStateChangeEvent 对象实例。

实例属性

从其父接口 Event 继承属性。

skipped 只读

如果用户代理正在跳过元素的渲染则返回 true,否则返回 false

示例

js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// 在画布需要开始更新时调用此方法。
function startCanvasUpdates(canvas) {
  // …
}

// 在画布需要停止更新时调用此方法。
function stopCanvasUpdates(canvas) {
  // …
}

规范

Specification
CSS Containment Module Level 2
# content-visibility-auto-state-change

浏览器兼容性

BCD tables only load in the browser

参见