Element: contentvisibilityautostatechange-Ereignis

Das contentvisibilityautostatechange-Ereignis wird bei jedem Element ausgelöst, das die Einstellung content-visibility: auto besitzt, wenn es beginnt oder aufhört, für den Benutzer relevant zu sein und seine Inhalte zu überspringen.

Solange das Element nicht relevant ist (zwischen den Start- und Endereignissen), überspringt der Benutzeragent das Rendern eines Elements, einschließlich Layout und Malen, was die Rendergeschwindigkeit der Seite erheblich verbessern kann. Das contentvisibilityautostatechange-Ereignis bietet eine Möglichkeit, auch Rendering-Prozesse der Anwendung zu starten oder zu stoppen (zum Beispiel eine Zeichnung auf einem <canvas>), wenn sie nicht benötigt werden, und so Rechenleistung zu sparen.

Beachten Sie, dass selbst wenn sie nicht sichtbar sind, die Inhalte des Elements semantisch relevant bleiben (z.B. für Nutzer assistierender Technologien), daher sollte dieses Signal nicht verwendet werden, um bedeutende semantische DOM-Updates zu überspringen.

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

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