Karmaşık Düzenlerde Etkileşimleri Optimize Etme

Kanban panoları veya devasa veri tabloları gibi karmaşık, çok sütunlu düzenlerde sürükle ve bırak işlemi ya da yoğun değişiklikler sırasında yüksek kare hızlarını (60 FPS) koruyun ve etkileşim gecikmesini ortadan kaldırın.

Genel Bakış

Karmaşık düzenlerde, tek bir öğede küçük bir değişiklik yapmak (ör. bir kartı sürüklemek veya bir hücreyi düzenlemek), tarayıcıyı tüm sayfayı yeniden düzenlemeye zorlayan stil ve düzen hesaplamalarının zincirleme reaksiyonunu tetikleyebilir. Bu durum, karelerin atlanmasına ve Interaction to Next Paint (INP) gecikmesinin yüksek olmasına neden olur.

content-visibility: auto özelliğini bağımsız düzen bölgelerine (ör. Kanban panosundaki sütunlar) uygulayarak oluşturma işini izole edebilirsiniz.

Ekrandaki Öğeler İçin Mekanizma

content-visibility: auto özelliğinin, ekranda zaten görünür olan öğelere nasıl fayda sağladığını anlamak önemlidir:

• Görünür öğeler için tarayıcı, oluşturma işlemini atlamaz.
• Bunun yerine, performans avantajı tamamen özelliğin otomatik olarak uyguladığı CSS sınırlamalarından (ör. düzen, stil ve boyama) kaynaklanır.
• Bu sınırlama bir sınır görevi görür. Sınırlama uygulanmış bir kapsayıcıda değişiklik olursa tarayıcı, değişikliklerin bu kapsayıcının dışındaki öğelerin geometrisini veya stillerini etkileyemeyeceğini bilir. Sayfa yeniden akışı izole edilerek genel düzenin yeniden hesaplanması engellenir.

Uygulama

1. Sınırlama Bölgelerini Belirleme

content-visibility: auto özelliğini, yalıtılmış düzen birimlerini (ör. tablo sütunları, pano listeleri) temsil eden büyük, bağımsız kapsayıcılara uygulayın.

.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. Etkileşimleri Yönetme

Sütun içinde gerçekleşen etkileşimlerin sınırlamadan yararlandığından emin olun.

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

Yedek stratejiler

Özellik, sorunsuz bir şekilde eski sürüme geçirilir. Desteklenmeyen tarayıcılarda:

• Özellik yoksayılır ve mutasyonlar standart global yeniden akışa neden olur.
• Eski tarayıcılarda benzer bir izolasyon efekti elde etmek için kapsama işlemini manuel olarak uygulayabilirsiniz:

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