ContentVisibilityAutoStateChangeEvent

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSS Containment Module Level 2 的 ContentVisibilityAutoStateChangeEvent 接口是 contentvisibilityautostatechange 事件的对象，对于设置了 content-visibility: auto (en-US) 的元素，在元素开始或不再与用户相关，或跳过它的内容时会触发该事件。

在元素不再与用户相关时（在开始和结束事件之间），用户代理会跳过元素的渲染，包括布局和绘制。这可以显著提高页面渲染速度。contentvisibilityautostatechange 事件为应用程序提供了一种在不需要渲染过程时启动或停止该过程（例如在 <canvas> 上绘制）的方法，从而提升了性能。

请注意，即使在视图中隐藏，元素的内容仍将保持语义相关（例如使用辅助技术的用户），所以不应使用此事件来跳过重要的语义 DOM 的更新。

Event ContentVisibilityAutoStateChangeEvent

构造函数

ContentVisibilityAutoStateChangeEvent() (en-US)

构造一个新的 ContentVisibilityAutoStateChangeEvent 对象实例。

实例属性

从其父接口 Event 继承属性。

skipped (en-US) 只读

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

示例

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

参见