Mengoptimalkan Interaksi dalam Tata Letak yang Kompleks

Pertahankan kecepatan frame yang tinggi (60 FPS) dan hilangkan latensi interaksi selama tarik lalu lepas atau mutasi berat dalam tata letak multi-kolom yang kompleks seperti papan Kanban atau petak data yang besar.

Ringkasan

Dalam tata letak yang kompleks, melakukan perubahan kecil pada satu item—seperti menarik kartu atau mengedit sel—dapat memicu reaksi berantai penghitungan gaya dan tata letak yang memaksa browser untuk me-reflow seluruh halaman. Hal ini menyebabkan frame yang dilewati dan latensi Interaction to Next Paint (INP) yang tinggi.

Dengan menerapkan content-visibility: auto ke region tata letak mandiri (seperti kolom di papan Kanban), Anda dapat mengisolasi pekerjaan rendering.

Mekanisme untuk Elemen di Layar

Penting untuk memahami manfaat content-visibility: auto bagi elemen yang sudah terlihat di layar:

• Untuk elemen yang terlihat, browser tidak melewati rendering.
• Sebagai gantinya, manfaat performa sepenuhnya berasal dari penampungan CSS yang otomatis diterapkan oleh properti (yaitu, tata letak, gaya, dan render).
• Pembatasan ini berfungsi sebagai batas. Jika mutasi terjadi di dalam penampung yang menerapkan pembatasan, browser akan mengetahui bahwa perubahan tersebut tidak dapat memengaruhi geometri atau gaya elemen di luar penampung tersebut. Reflow halaman diisolasi, sehingga mencegah penghitungan ulang tata letak global.

Penerapan

1. Mengidentifikasi Region Containment

Terapkan content-visibility: auto ke penampung besar dan mandiri yang mewakili unit tata letak terisolasi (misalnya, kolom petak, daftar papan).

.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. Mengelola Interaksi

Pastikan interaksi yang terjadi di dalam kolom mendapatkan manfaat dari penampungan.

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

Strategi penggantian

Properti akan menurun secara halus. Di browser yang tidak didukung:

• Properti diabaikan, dan mutasi akan menyebabkan penataan ulang global standar.
• Untuk mencapai efek isolasi yang serupa di browser lama, Anda dapat menerapkan pembatasan secara manual:

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