ContentVisibilityAutoStateChangeEvent

Die ContentVisibilityAutoStateChangeEvent-Schnittstelle 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 zu überspringen.

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

Beachten Sie, dass selbst wenn sie aus dem Blickfeld versteckt sind, die Inhalte von Elementen semantisch relevant bleiben (z.B. für Benutzer von assistiven Technologien), sodass dieses Signal nicht verwendet werden sollte, um signifikante semantische DOM-Updates zu überspringen.

Event ContentVisibilityAutoStateChangeEvent

Konstruktor

ContentVisibilityAutoStateChangeEvent()

Erstellt eine neue Instanz des ContentVisibilityAutoStateChangeEvent-Objekts.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

skipped Schreibgeschützt

Gibt true zurück, wenn der Benutzeragent das Rendering des Elements überspringt, oder false andernfalls.

Beispiele

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ContentVisibilityAutoStateChangeEvent
ContentVisibilityAutoStateChangeEvent() constructor
skipped

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch