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.
Returns true if the user agent is skipping the element's rendering, or false otherwise.
Examples
js
const canvasElem = document.querySelector("canvas");
canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility ="auto";functionstateChanged(event){if(event.skipped){stopCanvasUpdates(canvasElem);}else{startCanvasUpdates(canvasElem);}}// Call this when the canvas updates need to start.functionstartCanvasUpdates(canvas){// …}// Call this when the canvas updates need to stop.functionstopCanvasUpdates(canvas){// …}