Element: contentvisibilityautostatechange-Ereignis

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 contentvisibilityautostatechange-Ereignis wird bei jedem Element ausgelöst, das die Eigenschaft content-visibility: auto gesetzt hat, wenn es beginnt oder aufhört, für den Benutzer relevant zu sein und seine Inhalte übersprungen werden.

Während das Element nicht relevant ist (zwischen den Start- und Endereignissen), überspringt der Benutzeragent das Rendern des Elements, einschließlich Layout und Malen, was die Geschwindigkeit des Seitenrenderings erheblich verbessern kann. Das contentvisibilityautostatechange-Ereignis bietet eine Möglichkeit für den Code einer Anwendung, auch Renderprozesse zu starten oder zu stoppen (z. B. das Zeichnen auf einem <canvas>), wenn sie nicht benötigt werden, wodurch Rechenleistung gespart wird.

Beachten Sie, dass auch wenn Inhalte ausgeblendet sind, die Elemente inhaltlich relevant bleiben (z. B. für Benutzer von unterstützender Technologie). Daher sollte dieses Signal nicht verwendet werden, um bedeutende semantische DOM-Updates zu überspringen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

addEventListener("contentvisibilityautostatechange", (event) => { })

oncontentvisibilityautostatechange = (event) => { }

Ereignistyp

Ein ContentVisibilityAutoStateChangeEvent.

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