元素:contentvisibilityautostatechange 事件
当任何设置了 content-visibility: auto
的元素开始或停止与 用户相关 并 跳过其内容 时,会触发contentvisibilityautostatechange
事件。
当元素不相关(在开始和结束事件之间)时,用户代理会跳过元素的渲染,包括布局和绘制,这可以显著提高页面渲染速度。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);
}
}
// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
// …
}
// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
// …
}
规范
规范 |
---|
CSS Containment 模块级别 2 # content-visibility-auto-state-change |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
ContentVisibilityAutoStateChangeEvent
- CSS 容器
content-visibility
属性contain
属性