Mengidentifikasi JavaScript yang berjalan berat

JavaScript yang berjalan berat dapat berdampak buruk pada performa pemuatan halaman dan interaktivitas. Aplikasi web modern kini sangat bergantung pada JavaScript dari berbagai sumber. Hal ini mencakup kode aplikasi itu sendiri (dan kode framework yang diandalkannya), serta skrip pihak ketiga yang menambahkan fungsi seperti widget chat dan pemutar video. Skrip analisis dan pemasaran di balik layar juga merupakan kontributor umum yang terlalu mudah untuk dilupakan.

Mengidentifikasi penyebab utama halaman web yang tidak responsif bisa jadi sulit karena memerlukan keahlian tertentu untuk menjalankan pelacakan atau pembuatan profil performa web dan cara menafsirkan hasilnya. Selain itu, data lapangan sering kali sangat berbeda dengan data lab, yang hanya mereplikasi sebagian kecil skenario pengguna sebenarnya. Hal ini dapat menyulitkan identifikasi penyebab utama performa yang buruk, terutama untuk interaksi.

Long Animation Frames API adalah API ringan yang dapat digunakan untuk mengidentifikasi JavaScript yang berjalan berat di lapangan. Skrip yang berjalan berat dapat berupa satu skrip yang berjalan lama, atau skrip yang berjalan beberapa kali selama siklus proses halaman.

Cara menerapkan

Frame animasi panjang dipantau menggunakan antarmuka PerformanceObserver. API ini memunculkan entri long-animation-frame saat frame animasi memerlukan waktu lebih dari 50 milidetik untuk dirender. Entri ini berisi informasi tentang frame animasi panjang, termasuk durasi frame dan skrip yang dieksekusi selama frame.

Entri long-animation-frame berisi properti scripts yang merupakan array objek PerformanceScript. Setiap objek PerformanceScript berisi informasi tentang skrip yang dieksekusi selama frame animasi panjang, termasuk sourceURL dan duration skrip.

Contoh mengidentifikasi skrip yang berjalan paling lama yang berkontribusi pada frame animasi panjang

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

Praktik Terbaik

• LAKUKAN pemilihan Long Animation Frames API daripada alternatif seperti JS Self-Profiling API, yang memiliki overhead runtime lebih tinggi.
• LAKUKAN ringkasan informasi penting karena Long Animation Frames API berisi banyak detail.
• LAKUKAN pengiriman informasi yang diperlukan ke layanan analisis dalam produksi.

Dukungan browser dan strategi penggantian

Long Animation Frames API diabaikan oleh browser yang tidak mendukungnya, sehingga dapat digunakan dengan aman tanpa penggantian. Biasanya, peluang performa yang diidentifikasi juga akan berlaku untuk browser lain.