Yoğun çalışan JavaScript'leri belirleme

Yoğun şekilde çalışan JavaScript, hem sayfa yükleme performansı hem de etkileşim üzerinde olumsuz bir etkiye sahip olabilir. Modern web uygulamaları, birden fazla kaynaktan gelen JavaScript'e her zamankinden daha fazla bağımlıdır. Bunlar arasında uygulama kodunun kendisi (ve dayandığı çerçeve kodu) ile sohbet widget'ları ve video oynatıcılar gibi işlevler ekleyen üçüncü taraf komut dosyaları yer alır. Arka planda çalışan analiz ve pazarlama komut dosyaları da genellikle unutulan yaygın katkıda bulunanlardır.

Yanıt vermeyen bir web sayfasının temel nedenlerini belirlemek zor olabilir. Web performansını izleme veya profilleme ve sonuçları yorumlama konusunda belirli bir uzmanlık gerekir. Ayrıca alan verileri, gerçek kullanıcı senaryolarının yalnızca küçük bir alt kümesini kopyalayan laboratuvar verilerinden genellikle çok farklıdır. Bu durum, özellikle etkileşimler için düşük performansın temel nedenlerini belirlemeyi zorlaştırabilir.

Long Animation Frames API, sahada yoğun çalışan JavaScript'i tanımlamak için kullanılabilen hafif bir API'dir. Yoğun çalışan bir komut dosyası, tek bir uzun süreli komut dosyası veya sayfa yaşam döngüsü sırasında birden çok kez çalışan bir komut dosyası olabilir.

Nasıl uygulanır?

İşlenmesi uzun süren animasyon çerçeveleri, PerformanceObserver arayüzü kullanılarak izlenir. Bir animasyon karesinin oluşturulması 50 ms'den uzun sürdüğünde long-animation-frame girişi oluşturur. Giriş, işlenmesi uzun süren animasyon çerçevesi hakkında bilgiler içerir. Bu bilgiler arasında çerçevenin süresi ve çerçeve sırasında yürütülen komut dosyaları yer alır.

long-animation-frame girişi, PerformanceScript nesnelerinden oluşan bir dizi olan scripts özelliğini içerir. Her PerformanceScript nesnesi, işlenmesi uzun süren animasyon çerçevesi sırasında yürütülen komut dosyası hakkında bilgi (ör. komut dosyasının sourceURL ve duration bilgisi) içerir.

İşlenmesi uzun süren animasyon çerçevelerine katkıda bulunan en uzun süreli komut dosyalarını belirleme örneği

// Accumulate all script entries across the page lifecycle so no
// data is lost between observer callbacks.
const allScripts = [];

const observer = new PerformanceObserver(list => {
  // Collect all script entries across frames to find the biggest offenders.
  allScripts.push(...list.getEntries().flatMap(entry => entry.scripts));

  // Group by sourceURL so you can identify which scripts contribute
  // the most total time, even if each individual invocation is short.
  const scriptSource = [...new Set(allScripts.map(script => script.sourceURL))];
  const scriptsBySource = scriptSource.map(sourceURL => ([sourceURL,
      allScripts.filter(script => script.sourceURL === sourceURL)
  ]));
  const processedScripts = scriptsBySource.map(([sourceURL, scripts]) => ({
    sourceURL,
    count: scripts.length,
    totalDuration: scripts.reduce((subtotal, script) => subtotal + script.duration, 0)
  }));

  // Only include scripts above a certain threshold to reduce noise.
  const heavyScripts = processedScripts.filter(script => {
    return script.totalDuration > 100;
  });

  // Sort by total duration so the worst offenders appear first,
  // making it easier to prioritize optimization efforts.
  heavyScripts.sort((a, b) => b.totalDuration - a.totalDuration);

  // Log to the console for local debugging. In production, replace
  // this with a call to send the data to your analytics service.
  console.table(heavyScripts);
});

// Use buffered: true to capture any long frames that occurred before
// this observer was registered.
observer.observe({type: 'long-animation-frame', buffered: true});

En İyi Uygulamalar

• JS Self-Profiling API gibi daha yüksek çalışma zamanı ek yükü olan alternatifler yerine Long Animation Frames API'yi tercih EDİN.
• Long Animation Frames API çok fazla ayrıntı içerdiğinden önemli bilgileri özetleyin (DO).
• YAPIN: Gerekli bilgileri üretimdeki bir analiz hizmetine gönderin.

Tarayıcı desteği ve yedek stratejiler

İşlenmesi Uzun Süren Animasyon Çerçeveleri API'si, desteklemeyen tarayıcılar tarafından yoksayılır. Bu nedenle, yedekler olmadan güvenle kullanılabilir. Çoğu durumda, belirlediği performans fırsatları diğer tarayıcılar için de geçerli olur.