Optymalizacja interakcji w złożonych układach

Utrzymuj wysoką liczbę klatek (60 kl./s) i eliminuj opóźnienia interakcji podczas przeciągania i upuszczania lub wprowadzania dużych zmian w złożonych układach wielokolumnowych, takich jak tablice Kanban czy ogromne siatki danych.

Przegląd

W skomplikowanych układach wprowadzenie drobnej zmiany w jednym elemencie, np. przeciągnięcie karty lub edytowanie komórki, może wywołać reakcję łańcuchową obliczeń stylu i układu, która zmusi przeglądarkę do ponownego wyrenderowania całej strony. Powoduje to gubienie klatek i duże opóźnienie interakcji do kolejnego wyrenderowania (INP).

Stosując content-visibility: auto do samodzielnych regionów układu (takich jak kolumny na tablicy Kanban), możesz odizolować renderowanie.

Mechanizm elementów na ekranie

Warto zrozumieć, jak content-visibility: auto wpływa na elementy, które są już widoczne na ekranie:

• W przypadku widocznych elementów przeglądarka nie pomija renderowania.
• Zamiast tego korzyści związane z wydajnością wynikają wyłącznie z ograniczeń CSS, które ta właściwość automatycznie wymusza (czyli układu, stylu i renderowania).
• To ograniczenie działa jak granica. Jeśli mutacja występuje w kontenerze z zastosowanym ograniczeniem, przeglądarka wie, że zmiany nie mogą wpłynąć na geometrię ani style elementów poza tym kontenerem. Zmiana układu strony jest odizolowana, co zapobiega ponownemu obliczaniu układu globalnego.

Implementacja

1. Identyfikowanie regionów izolacji

Zastosuj content-visibility: auto do dużych, samodzielnych kontenerów, które reprezentują odizolowane jednostki układu (np. kolumny siatki, listy tablic).

.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. Zarządzanie interakcjami

Upewnij się, że interakcje zachodzące w kolumnie korzystają z ograniczenia.

// 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 zastępcze

Właściwość ulega stopniowej degradacji. W nieobsługiwanych przeglądarkach:

• Właściwość jest ignorowana, a mutacje powodują standardowe globalne ponowne rozmieszczenie.
• Aby uzyskać podobny efekt izolacji w starszych przeglądarkach, możesz ręcznie zastosować ograniczenie:

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