Ottimizzazione delle interazioni nei layout complessi

Mantieni frequenze fotogrammi elevate (60 f/s) ed elimina la latenza di interazione durante il drag and drop o le mutazioni pesanti in layout complessi a più colonne come le bacheche Kanban o le griglie di dati di grandi dimensioni.

Panoramica

Nei layout complessi, l'esecuzione di una modifica minore a un singolo elemento, ad esempio il trascinamento di una scheda o la modifica di una cella, può attivare una reazione a catena di calcoli di stile e layout che costringe il browser a eseguire il reflow dell'intera pagina. Ciò comporta frame persi e un'elevata latenza di Interaction to Next Paint (INP).

Applicando content-visibility: auto alle regioni di layout autonome (come le colonne di una bacheca Kanban), puoi isolare il lavoro di rendering.

Meccanismo per gli elementi sullo schermo

È importante capire in che modo content-visibility: auto avvantaggia gli elementi che sono già visibili sullo schermo:

• Per gli elementi visibili, il browser non salta il rendering.
• Invece, il vantaggio in termini di prestazioni deriva interamente dai contenimenti CSS che la proprietà applica automaticamente (ovvero layout, stile e paint).
• Questo contenimento funge da confine. Se si verifica una mutazione all'interno di un container con contenimento applicato, il browser sa che le modifiche non possono influire sulla geometria o sugli stili degli elementi esterni al container. Il reflow della pagina è isolato, impedendo un ricalcolo del layout globale.

Implementazione

1. Identifica le regioni di contenimento

Applica content-visibility: auto a container di grandi dimensioni e autonomi che rappresentano unità di layout isolate (ad es. colonne di griglia, elenchi di bacheche).

.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. Gestisci le interazioni

Assicurati che le interazioni che si verificano all'interno della colonna traggano vantaggio dal contenimento.

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

Strategie di riserva

La proprietà si degrada in modo controllato. Nei browser non supportati:

• La proprietà viene ignorata e le mutazioni causeranno il reflow globale standard.
• Per ottenere un effetto di isolamento simile nei browser meno recenti, puoi applicare manualmente il contenimento:

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