Como otimizar interações em layouts complexos

Mantenha frame rates altos (60 FPS) e elimine a latência de interação durante ações de arrastar e soltar ou mutações pesadas em layouts complexos de colunas, como quadros Kanban ou grades de dados enormes.

Visão geral

Em layouts complexos, uma pequena mudança em um único item, como arrastar um card ou editar uma célula, pode acionar uma reação em cadeia de cálculos de estilo e layout que força o navegador a refluir a página inteira. Isso resulta em frames perdidos e alta latência de Interaction to Next Paint (INP).

Ao aplicar content-visibility: auto a regiões de layout independentes (como colunas em um quadro Kanban), é possível isolar o trabalho de renderização.

Mecanismo para elementos na tela

É importante entender como o content-visibility: auto beneficia os elementos que já estão visíveis na tela:

• Para elementos visíveis, o navegador não pula a renderização.
• Em vez disso, o benefício de desempenho vem inteiramente das contenções de CSS que a propriedade aplica automaticamente (ou seja, layout, estilo e pintura).
• Essa contenção funciona como um limite. Se uma mutação ocorrer dentro de um contêiner com contenção aplicada, o navegador saberá que as mudanças não podem afetar a geometria ou os estilos dos elementos fora desse contêiner. O refluxo da página é isolado, impedindo um recálculo global do layout.

Implementação

1. Identificar regiões de contenção

Aplique content-visibility: auto a contêineres grandes e independentes que representam unidades de layout isoladas (por exemplo, colunas de grade, listas de quadros).

.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. Gerenciar interações

As interações que ocorrem dentro da coluna precisam se beneficiar da contenção.

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

Estratégias de fallback

A propriedade é degradada de forma otimizada. Em navegadores incompatíveis:

• A propriedade é ignorada, e as mutações causam o refluxo global padrão.
• Para conseguir um efeito de isolamento semelhante em navegadores mais antigos, você pode aplicar a contenção manualmente:

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