Performance observer - Akses efisien ke data performa

Progressive Web App memungkinkan developer membuat class aplikasi baru yang menghadirkan pengalaman pengguna yang andal dan berperforma tinggi. Namun, untuk memastikan aplikasi web mencapai sasaran performa yang diinginkan, developer memerlukan akses ke data pengukuran performa beresolusi tinggi. Spesifikasi Linimasa Performa W3C menentukan antarmuka yang dimaksud agar browser menyediakan akses terprogram ke data waktu tingkat rendah. Cara ini akan membuka pintu ke beberapa kasus penggunaan yang menarik:

  • analisis performa kustom dan offline
  • alat analisis dan visualisasi kinerja pihak ketiga
  • penilaian performa yang terintegrasi ke dalam IDE dan alat developer lainnya

Akses ke data waktu semacam ini sudah tersedia di sebagian besar browser utama untuk waktu navigasi, waktu resource, dan waktu pengguna. Penambahan terbaru adalah antarmuka performance observer, yang pada dasarnya adalah antarmuka streaming untuk mengumpulkan informasi pengaturan waktu tingkat rendah secara asinkron, saat dikumpulkan oleh browser. Antarmuka baru ini memberikan sejumlah keuntungan penting dibandingkan metode sebelumnya untuk mengakses linimasa:

  • Saat ini, aplikasi harus secara berkala melakukan polling dan membedakan pengukuran yang disimpan, yang membutuhkan biaya besar. Antarmuka ini menawarkan callback kepada mereka. (Dengan kata lain, tidak perlu melakukan polling). Akibatnya, aplikasi yang menggunakan API ini bisa menjadi lebih responsif dan lebih efisien.
  • Hal ini tidak tunduk pada batas buffering (sebagian besar buffering disetel ke 150 item secara default), dan menghindari kondisi race antara konsumen yang berbeda yang mungkin ingin memodifikasi buffer.
  • Notifikasi Performance observer dikirim secara asinkron dan browser dapat mengirimkannya selama waktu tidak ada aktivitas untuk menghindari persaingan dengan pekerjaan rendering penting.

Mulai Chrome 52, antarmuka performance observer diaktifkan secara default. Mari kita lihat cara menggunakannya.

<html>
<head>
    <script>
    var observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
        // Display each reported measurement on console
        if (console) {
            console.log("Name: "       + entry.name      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
        }
        })
    });
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    performance.mark('registered-observer');

    function clicked(elem) {
        performance.measure('button clicked');
    }
    </script>
</head>
<body>
    <button onclick="clicked(this)">Measure</button>
</body>
</html>

Halaman sederhana ini dimulai dengan tag skrip yang menentukan beberapa kode JavaScript:

  • Kita membuat instance objek PerformanceObserver baru dan meneruskan fungsi pengendali peristiwa ke konstruktor objek. Konstruktor menginisialisasi objek sedemikian rupa sehingga pengendali akan dipanggil setiap kali serangkaian data pengukuran baru siap diproses (dengan data pengukuran yang diteruskan sebagai daftar objek). Pengendali ditetapkan di sini sebagai fungsi anonim yang hanya menampilkan data pengukuran yang diformat di konsol. Dalam skenario dunia nyata, data ini mungkin disimpan di cloud untuk analisis selanjutnya, atau dimasukkan ke dalam alat visualisasi interaktif.
  • Kita mendaftar untuk jenis peristiwa pengaturan waktu yang diminati melalui metode observe() dan memanggil metode mark() untuk menandai instan saat kita mendaftar, yang akan dianggap sebagai awal dari interval pengaturan waktu.
  • Kami mendefinisikan pengendali klik untuk tombol yang ditentukan dalam isi halaman. Pengendali klik ini memanggil metode measure() untuk mengambil data waktu saat tombol diklik.

Di bagian isi halaman, kita menentukan tombol, menetapkan pengendali klik ke peristiwa onclick, dan kita siap memulai.

Sekarang, jika kita memuat halaman dan membuka panel Chrome DevTools untuk melihat konsol JavaScript, setiap kali kita mengklik tombol, pengukuran performa akan diambil. Dan karena kita telah mendaftar untuk mengamati pengukuran tersebut, pengukuran tersebut akan diteruskan ke pengendali peristiwa kami, secara asinkron tanpa perlu melakukan polling linimasa, yang menampilkan pengukuran di konsol saat terjadi:

{i>Performance observer.<i}

Nilai start mewakili stempel waktu awal untuk peristiwa berjenis mark (yang hanya dimiliki satu oleh aplikasi ini). Peristiwa dengan jenis measure tidak memiliki waktu mulai yang melekat; peristiwa tersebut mewakili pengukuran waktu yang diambil relatif terhadap peristiwa mark terakhir. Dengan demikian, nilai durasi yang terlihat di sini mewakili waktu yang telah berlalu antara panggilan ke mark(), yang berfungsi sebagai titik awal interval yang sama, dan beberapa panggilan berikutnya ke measure().

Seperti yang Anda lihat, API ini cukup sederhana dan menawarkan kemampuan untuk mengumpulkan data performa real time yang difilter, beresolusi tinggi, dan tanpa polling, yang akan membuka pintu bagi alat performa yang lebih efisien untuk aplikasi web.