1. 面向开发者的 Web 技术
  2. Web API
  3. Element
  4. contentvisibilityautostatechange

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

Element：contentvisibilityautostatechange 事件

基线 2024
最近可用

自 September 2024 起，此特性已在最新浏览器中得到支持。但在较旧的设备或浏览器中可能无法运行。

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

contentvisibilityautostatechange 事件会在设置了 content-visibility: auto 的元素开始或不再与用户相关，且正在跳过其内容时触发。

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

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

语法

在 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。

js
addEventListener("contentvisibilityautostatechange", (event) => {});
oncontentvisibilityautostatechange = (event) => {};

备注：事件的类型为 ContentVisibilityAutoStateChangeEvent。

示例

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) {
  // …
}

规范

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

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题