Optimiser les interactions dans les mises en page complexes

Maintenez des fréquences d'images élevées (60 FPS) et éliminez la latence d'interaction lors des opérations de glisser-déposer ou des mutations importantes dans des mises en page multicolonnes complexes, comme les tableaux Kanban ou les grilles de données volumineuses.

Présentation

Dans les mises en page complexes, une modification mineure apportée à un seul élément (comme le déplacement d'une fiche ou la modification d'une cellule) peut déclencher une réaction en chaîne de calculs de style et de mise en page qui force le navigateur à réorganiser l'intégralité de la page. Cela entraîne des pertes d'images et une latence élevée de l'INP (Interaction to Next Paint).

En appliquant content-visibility: auto à des régions de mise en page autonomes (comme les colonnes d'un tableau Kanban), vous pouvez isoler le travail de rendu.

Mécanisme pour les éléments à l'écran

Il est important de comprendre comment content-visibility: auto profite aux éléments qui sont déjà visibles à l'écran :

• Pour les éléments visibles, le navigateur n'ignore pas l'affichage.
• Au lieu de cela, l'amélioration des performances provient entièrement des confinements CSS que la propriété applique automatiquement (c'est-à-dire la mise en page, le style et l'affichage).
• Ce confinement agit comme une limite. Si une mutation se produit dans un conteneur auquel le confinement est appliqué, le navigateur sait que les modifications ne peuvent pas affecter la géométrie ni les styles des éléments situés en dehors de ce conteneur. Le réajustement de la page est isolé, ce qui évite un recalcul global de la mise en page.

Implémentation

1. Identifier les régions de confinement

Appliquez content-visibility: auto aux grands conteneurs autonomes qui représentent des unités de mise en page isolées (par exemple, des colonnes de grille, des listes de tableaux).

.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. Gérer les interactions

Assurez-vous que les interactions qui se produisent à l'intérieur de la colonne bénéficient du confinement.

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

Stratégies de remplacement

La propriété se dégrade de manière fluide. Dans les navigateurs non compatibles :

• La propriété est ignorée et les mutations entraînent le reflow global standard.
• Pour obtenir un effet d'isolation similaire dans les anciens navigateurs, vous pouvez appliquer manuellement le confinement :

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