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 语义更新。
构造函数
ContentVisibilityAutoStateChangeEvent()
-
创建新的
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) {
// …
}
规范
Specification |
---|
CSS Containment Module Level 2 # content-visibility-auto-state-change |
浏览器兼容性
BCD tables only load in the browser