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.
Die ContentVisibilityAutoStateChangeEvent
-Schnittstelle ist das Ereignisobjekt für das contentvisibilityautostatechange
-Ereignis, das bei jedem Element mit content-visibility: auto
ausgelöst wird, wenn es beginnt oder aufhört, für den Benutzer relevant zu sein und seine Inhalte zu überspringen.
Während das Element nicht relevant ist (zwischen den Start- und Endereignissen), überspringt der Benutzeragent das Rendering eines Elements, einschließlich Layout und Malen.
Dies kann die Rendergeschwindigkeit der Seite erheblich verbessern.
Das contentvisibilityautostatechange
-Ereignis bietet eine Möglichkeit, auch die Renderprozesse einer App (z.B. Zeichnen auf einem <canvas>
) zu starten oder zu stoppen, wenn sie nicht benötigt werden, und so Rechenleistung zu sparen.
Beachten Sie, dass selbst wenn sie aus dem Blickfeld versteckt sind, die Inhalte von Elementen semantisch relevant bleiben (z.B. für Benutzer von assistiven Technologien), sodass dieses Signal nicht verwendet werden sollte, um signifikante semantische DOM-Updates zu überspringen.
Konstruktor
ContentVisibilityAutoStateChangeEvent()
-
Erstellt eine neue Instanz des
ContentVisibilityAutoStateChangeEvent
-Objekts.
Instanz-Eigenschaften
Beispiele
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) {
// …
}
Spezifikationen
Specification |
---|
CSS Containment Module Level 2 # content-visibility-auto-state-change |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das
contentvisibilityautostatechange
-Ereignis - CSS Containment
- Die
content-visibility
Eigenschaft - Die
contain
Eigenschaft