Interacties in complexe lay-outs optimaliseren

Behoud hoge framesnelheden (60 FPS) en elimineer interactievertraging tijdens slepen en neerzetten of zware mutaties in complexe lay-outs met meerdere kolommen, zoals Kanban-borden of enorme gegevensrasters.

Overzicht

In complexe lay-outs kan een kleine wijziging in één item, zoals een kaart slepen of een cel bewerken, een kettingreactie van stijl- en lay-outberekeningen veroorzaken waardoor de browser de hele pagina opnieuw moet opmaken. Dit leidt tot verloren frames en een hoge vertraging voor Interaction to Next Paint (INP).

Door content-visibility: auto toe te passen op zelfstandige lay-outregio's (zoals kolommen in een Kanban-bord), kun je weergavewerk isoleren.

Mechanisme voor elementen op het scherm

Het is belangrijk om te begrijpen hoe content-visibility: auto elementen verbetert die al zichtbaar zijn op het scherm:

• Voor zichtbare elementen slaat de browser de weergave niet over.
• In plaats daarvan komt het prestatievoordeel volledig van de CSS-containments die de property automatisch afdwingt (namelijk vormgeving, stijl en paint).
• Deze insluiting fungeert als een grens. Als er een mutatie plaatsvindt in een container waarop containment is toegepast, weet de browser dat de wijzigingen geen invloed hebben op de geometrie of stijlen van elementen buiten die container. De pagina-reflow is geïsoleerd, waardoor een algemene herberekening van de indeling wordt voorkomen.

Implementatie

1. Insluitingsregio's identificeren

Pas content-visibility: auto toe op grote, op zichzelf staande containers die geïsoleerde vormgevingseenheden vertegenwoordigen (bijv. rasterkolommen, bordlijsten).

.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. Interacties beheren

Zorg dat interacties in de kolom profiteren van de containment.

// 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);
}

Reservestrategieën

De property wordt probleemloos gedowngraded. In niet-ondersteunde browsers:

• De eigenschap wordt genegeerd en mutaties veroorzaken de standaard algemene herstroom.
• Als je een vergelijkbaar isolatie-effect wilt bereiken in oudere browsers, kun je terugvallen op handmatige insluiting:

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