Verimli Arka Plan İşleme

Sistem kaynaklarını ve pil ömrünü korumak için bir bileşen tarayıcı tarafından oluşturulmadığında ağır arka plan görevlerini duraklatın.

Genel Bakış

content-visibility: auto özelliği, tarayıcının görüntü alanının çok dışındaki öğeler için oluşturma hesaplamalarını atlamasına olanak tanır. Tarayıcı, bir öğenin oluşturulmasını atlamaya veya devam ettirmeye karar verdiğinde söz konusu öğede contentvisibilityautostatechange etkinliğini tetikler.

Bu etkinliği dinleyerek <canvas> animasyonları, WebGL oluşturma veya yüksek frekanslı WebSocket veri yoklaması gibi yüksek maliyetli işlemleri ihtiyaç duyulmadığında duraklatabilir ve tarayıcı içeriği görüntülemeye hazırlandığında tam zamanında devam ettirebilirsiniz.

contentvisibilityautostatechange - IntersectionObserver

Hangi API'nin ne zaman kullanılacağını anlamak önemlidir:

• Görüntü alanındaki bir öğenin tam görsel görünürlüğüne bağlı uygulama mantığı (ör. geç yüklenen veriler, sonsuz kaydırma tetikleyicileri) için IntersectionObserver kullanın.
• Yoğun oluşturma işlemleri gerektiren işler için (ör. karmaşık tuval güncellemeleri veya yoğun DOM mutasyonları) contentvisibilityautostatechange kullanın. Bu etkinlik, doğrudan tarayıcının dahili oluşturma yaşam döngüsüne bağlıdır. Tarayıcı, genellikle bir öğeyi ekranda görünmeden önce oluşturmaya başlar (önceden oluşturma payı). Bu etkinlik, içeriğinizin ne zaman hazır olduğunu bildirir.

Uygulama

1. CSS Content Visibility'yi uygulama

Ağır kapsayıcıda content-visibility: auto özelliğini ayarlayın ve kaydırma çubuğunun atlamasını önlemek için bir yer tutucu boyutu sağlayın.

.heavy-component {
  /* Defer rendering work when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide a placeholder size to prevent layouts shifts.
    - '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.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '500px' 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 none auto 500px;
}

2. Durum Değişikliklerini Dinleme

Arka plan görevlerini duraklatmak veya devam ettirmek için contentvisibilityautostatechange için bir etkinlik işleyici ekleyin.

const component = document.querySelector('.heavy-component');

// Option 1: Direct listener (recommended)
component.addEventListener('contentvisibilityautostatechange', (event) => {
  if (event.skipped) {
    // The browser skipped rendering this content.
    // DO NOT perform heavy mutations or animation loops here.
    stopSimulation();
    pauseWebSocketPolling();
  } else {
    // The browser is about to render the content.
    // Resume your work so it is ready when visible.
    startSimulation();
    resumeWebSocketPolling();
  }
});

// Option 2: Capturing listener for event delegation
document.addEventListener('contentvisibilityautostatechange', (event) => {
  if (event.target.matches('.heavy-component')) {
    if (event.skipped) {
      stopSimulation();
    } else {
      startSimulation();
    }
  }
}, { capture: true });

Yedek stratejiler

content-visibility özelliği ve ilişkili contentvisibilityautostatechange etkinliği, progresif geliştirmelerdir. Bu özellikleri desteklemeyen tarayıcılarda:

• CSS özelliği yok sayılır ve içerik normal şekilde oluşturulur.
• Etkinlik hiçbir zaman tetiklenmez. Bu nedenle, arka plan görevleri optimizasyon olmadan normal şekilde çalışmaya devam eder.

Eski tarayıcılarda görevleri duraklatmayı desteklemeniz gerekiyorsa yaklaşık bir değer olarak IntersectionObserver kullanabilirsiniz. Bu, eski cihazlarda da pil ve CPU tasarrufu sağlar.

// Fallback using IntersectionObserver for older browsers
const target = document.getElementById('target-container');

// Check if content-visibility is supported
const isSupported = 'contentVisibility' in document.documentElement.style;

if (!isSupported) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // The element is close to the screen. Start work!
        startSimulation();
      } else {
        // The element is far away. Pause work!
        stopSimulation();
      }
    });
  }, {
    // Use rootMargin to start rendering before it hits the screen
    rootMargin: '200px'
  });

  observer.observe(target);
}