ContentVisibilityAutoStateChangeEvent
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The ContentVisibilityAutoStateChangeEvent
interface is the event object for the contentvisibilityautostatechange
event, which fires on any element with content-visibility: auto
set on it when it starts or stops being relevant to the user and skipping its contents.
While the element is not relevant (between the start and end events), the user agent skips an element's rendering, including layout and painting.
This can significantly improve page rendering speed.
The contentvisibilityautostatechange
event provides a way for an app's code to also start or stop rendering processes (e.g. drawing on a <canvas>
) when they are not needed, thereby conserving processing power.
Note that even when hidden from view, element contents will remain semantically relevant (e.g. to assistive technology users), so this signal should not be used to skip significant semantic DOM updates.
Constructor
ContentVisibilityAutoStateChangeEvent()
-
Creates a new
ContentVisibilityAutoStateChangeEvent
object instance.
Instance properties
Examples
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) {
// …
}
Specifications
Specification |
---|
CSS Containment Module Level 2 # content-visibility-auto-state-change |
Browser compatibility
BCD tables only load in the browser
See also
- The
contentvisibilityautostatechange
event - CSS Containment
- The
content-visibility
property - The
contain
property