Оптимизация взаимодействий в сложных макетах

Поддерживайте высокую частоту кадров (60 кадров/с) и устраняйте задержки при перетаскивании или значительных изменениях в сложных макетах с несколькими колонками, таких как доски канбан или массивные сетки данных.

Обзор

В сложных макетах незначительное изменение одного элемента, например перетаскивание карточки или редактирование ячейки, может вызвать цепную реакцию вычислений стиля и макета, которая заставит браузер перекомпоновать всю страницу. Это приводит к пропуску кадров и высокой задержке Interaction to Next Paint (INP).

Применив content-visibility: auto к автономным областям макета (например, столбцам на доске Kanban), вы можете изолировать работу по рендерингу.

Механизм для элементов на экране

Важно понимать, как content-visibility: auto влияет на элементы, которые уже видны на экране:

• Для видимых элементов браузер не пропускает отрисовку.
• Вместо этого повышение производительности полностью обеспечивается за счет ограничений CSS, которые свойство применяет автоматически (например, макет, стиль и отрисовка).
• Это ограничение действует как граница. Если мутация происходит внутри контейнера с примененным ограничением, браузер знает, что изменения не могут повлиять на геометрию или стили элементов за пределами этого контейнера. Перекомпоновка страницы изолирована, что предотвращает глобальный перерасчет макета.

Реализация

1. Определите регионы сдерживания

Применяйте content-visibility: auto к большим автономным контейнерам, которые представляют собой изолированные элементы макета (например, столбцы сетки, списки досок).

.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. Управление взаимодействиями

Убедитесь, что взаимодействия, происходящие внутри столбца, выигрывают от сдерживания.

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

Резервные стратегии

Свойство деградирует корректно. В неподдерживаемых браузерах:

• Свойство игнорируется, а изменения вызывают стандартное глобальное переформатирование.
• Чтобы добиться аналогичного эффекта изоляции в старых браузерах, можно вручную применить ограничение:

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