ContentVisibilityAutoStateChangeEvent

Die ContentVisibilityAutoStateChangeEvent Schnittstelle ist das Ereignisobjekt für das contentvisibilityautostatechange-Ereignis, das bei jedem Element ausgelöst wird, welches content-visibility: auto eingestellt hat, wenn es anfängt oder aufhört, für den Benutzer relevant zu sein und dessen Inhalte zu überspringen.

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

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

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) {
  // …
}