ContentVisibilityAutoStateChangeEvent
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
CSS Containment Module Level 2 的 ContentVisibilityAutoStateChangeEvent
接口是 contentvisibilityautostatechange
事件的对象,对于设置了 content-visibility: auto
(en-US) 的元素,在元素开始或不再与用户相关,或跳过它的内容时会触发该事件。
在元素不再与用户相关时(在开始和结束事件之间),用户代理会跳过元素的渲染,包括布局和绘制。这可以显著提高页面渲染速度。contentvisibilityautostatechange
事件为应用程序提供了一种在不需要渲染过程时启动或停止该过程(例如在 <canvas>
上绘制)的方法,从而提升了性能。
请注意,即使在视图中隐藏,元素的内容仍将保持语义相关(例如使用辅助技术的用户),所以不应使用此事件来跳过重要的语义 DOM 的更新。
构造函数
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