Optimiza las interacciones en diseños complejos

Mantener velocidades de fotogramas altas (60 FPS) y eliminar la latencia de interacción durante las acciones de arrastrar y soltar o las mutaciones intensas en diseños complejos de varias columnas, como tableros de Kanban o cuadrículas de datos masivas

Descripción general

En diseños complejos, realizar un cambio menor en un solo elemento, como arrastrar una tarjeta o editar una celda, puede desencadenar una reacción en cadena de cálculos de estilo y diseño que obligue al navegador a volver a organizar toda la página. Esto genera fotogramas perdidos y una latencia alta de Interaction to Next Paint (INP).

Si aplicas content-visibility: auto a regiones de diseño independientes (como columnas en un tablero Kanban), puedes aislar el trabajo de renderización.

Mecanismo para los elementos en pantalla

Es importante comprender cómo content-visibility: auto beneficia a los elementos que ya están visibles en la pantalla:

• En el caso de los elementos visibles, el navegador no omite la renderización.
• En cambio, el beneficio de rendimiento proviene por completo de las contenciones de CSS que la propiedad aplica automáticamente (es decir, diseño, estilo y pintura).
• Esta contención actúa como un límite. Si se produce una mutación dentro de un contenedor con contención aplicada, el navegador sabe que los cambios no pueden afectar la geometría ni los estilos de los elementos fuera de ese contenedor. El reflujo de la página está aislado, lo que evita que se vuelva a calcular el diseño global.

Implementación

1. Identifica las regiones de contención

Aplica content-visibility: auto a contenedores grandes y autónomos que representen unidades de diseño aisladas (p.ej., columnas de cuadrícula, listas de tableros).

.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. Administra las interacciones

Asegúrate de que las interacciones que se producen dentro de la columna se beneficien de la contención.

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

Estrategias de resguardo

La propiedad se degrada de forma elegante. En navegadores no compatibles:

• Se ignora la propiedad y las mutaciones causarán el reflujo global estándar.
• Para lograr un efecto de aislamiento similar en navegadores más antiguos, puedes recurrir a la aplicación manual de la contención:

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