Interaktionen in komplexen Layouts optimieren

Sorgen Sie für hohe Frameraten (60 fps) und vermeiden Sie Interaktionslatenz bei Drag-and-Drop-Vorgängen oder umfangreichen Änderungen in komplexen, mehrspaltigen Layouts wie Kanban-Boards oder riesigen Datenrastern.

Übersicht

In komplexen Layouts kann eine kleine Änderung an einem einzelnen Element, z. B. das Ziehen einer Karte oder das Bearbeiten einer Zelle, eine Kettenreaktion von Stil- und Layoutberechnungen auslösen, die den Browser dazu zwingt, die gesamte Seite neu zu rendern. Das führt zu ausgelassenen Frames und einer hohen INP-Latenz (Interaction to Next Paint).

Wenn Sie content-visibility: auto auf eigenständige Layoutbereiche (z. B. Spalten in einem Kanban-Board) anwenden, können Sie die Rendering-Arbeit isolieren.

Mechanismus für On-Screen-Elemente

Es ist wichtig zu verstehen, wie content-visibility: auto Elemente unterstützt, die bereits auf dem Bildschirm sichtbar sind:

• Bei sichtbaren Elementen überspringt der Browser das Rendering nicht.
• Stattdessen ergibt sich der Leistungsvorteil vollständig aus den CSS-Containments, die die Property automatisch erzwingt (d.h. Layout, Stil und Paint).
• Diese Eingrenzung dient als Grenze. Wenn eine Mutation innerhalb eines Containers mit angewendeter Containment-Eigenschaft auftritt, weiß der Browser, dass die Änderungen die Geometrie oder die Stile von Elementen außerhalb dieses Containers nicht beeinflussen können. Der Seitenumbruch ist isoliert, sodass keine globale Layoutneuberechnung erfolgt.

Implementierung

1. Eindämmungsregionen identifizieren

Wenden Sie content-visibility: auto auf große, eigenständige Container an, die isolierte Layouteinheiten darstellen (z.B. Rasterspalten, Boardlisten).

.board-column {
  /* Apply containment boundaries */
  content-visibility: auto;
  
  /* Mandatory: Provide a placeholder size to prevent layouts shifts.
     For a vertical column, define a reasonable width and height. 
     - 'auto' is optional and enables the browser to remember the actual size
       once rendered. It must be paired with a <length> value to be used for
       the first render.
     - '300px' is the estimated width of this element. This can be any valid
      CSS <length> value. Replace it with the expected width of your
      component.
     - '800px' is the estimated height of this element. This can be any valid
      CSS <length> value. Replace it with the expected height of your
      component.
   */
  contain-intrinsic-size: auto 300px auto 800px;
}

2. Interaktionen verwalten

Achten Sie darauf, dass Interaktionen innerhalb der Spalte von der Eingrenzung profitieren.

// Example: Drag and drop item movement
function moveItemToColumn(itemId, columnId) {
  const item = document.getElementById(itemId);
  const column = document.getElementById(columnId);
  
  // The browser will only reflow this specific column, 
  // not the entire board layout!
  column.appendChild(item);
}

Fallback-Strategien

Die Property wird ordnungsgemäß herabgestuft. In nicht unterstützten Browsern:

• Das Attribut wird ignoriert und Änderungen führen zum standardmäßigen globalen Reflow.
• Um einen ähnlichen Isolationseffekt in älteren Browsern zu erzielen, können Sie die Eingrenzung manuell anwenden:

@supports not (content-visibility: auto) {
  .board-column {
    /* Manual fallback for containment */
    contain: layout style paint;
  }
}