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.
Das ContentVisibilityAutoStateChangeEvent Interface 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 überspringt.
Solange das Element nicht relevant ist (zwischen Start- und Endereignissen), überspringt der Benutzeragent das Rendering eines Elements, einschließlich Layout und Malen. Dies kann die Rendering-Geschwindigkeit der Seite erheblich verbessern. Das contentvisibilityautostatechange Ereignis bietet eine Möglichkeit für den Code einer App, auch Rendering-Prozesse (z. B. das Zeichnen auf einem <canvas>) zu starten oder zu stoppen, wenn sie nicht benötigt werden, und so Rechenleistung zu sparen.
Beachten Sie, dass der Inhalt des Elements auch dann semantisch relevant bleibt (z. B. für Benutzer von unterstützender Technologie), wenn er nicht sichtbar ist. Dieses Signal sollte daher nicht verwendet werden, um wichtige semantische DOM-Updates zu überspringen.
Konstruktor
ContentVisibilityAutoStateChangeEvent()-
Erstellt eine neue Instanz des
ContentVisibilityAutoStateChangeEventObjekts.
Instanzeigenschaften
Erbt Eigenschaften von seinem Elternteil, Event.
skippedSchreibgeschützt-
Gibt
truezurück, wenn der Benutzeragent das Rendern des Elements überspringt, oderfalseandernfalls.
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
Siehe auch
- Das
contentvisibilityautostatechangeEreignis - CSS Containment
- Die
content-visibilityEigenschaft - Die
containEigenschaft