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 auf jedem Element ausgelöst, das content-visibility: auto gesetzt hat, wenn es für den Nutzer relevant wird oder nicht mehr relevant ist und seine Inhalte übersprungen werden.

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

Beachten Sie, dass selbst wenn sie aus der Sicht verborgen sind, die Inhalte eines Elements semantisch relevant bleiben (z. B. für Benutzer unterstützender Technologien), daher sollte dieses Signal nicht verwendet werden, um wesentliche semantische DOM-Updates zu überspringen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden