Performance observer - Akses efisien ke data performa

Progressive Web App memungkinkan developer membuat class aplikasi baru yang memberikan pengalaman pengguna yang andal dan berperforma tinggi. Namun, untuk memastikan aplikasi web mencapai sasaran performa yang diinginkan, developer memerlukan akses ke data pengukuran performa resolusi tinggi. Spesifikasi Linimasa Performa W3C menentukan antarmuka tersebut bagi browser untuk memberikan akses terprogram ke data pengukuran waktu tingkat rendah. Hal ini membuka peluang untuk beberapa kasus penggunaan yang menarik:

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

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

  • Saat ini, aplikasi harus melakukan polling dan membandingkan pengukuran yang disimpan secara berkala, yang memerlukan biaya mahal. Antarmuka ini menawarkan callback kepada mereka. (Dengan kata lain, tidak perlu melakukan polling). Akibatnya, aplikasi yang menggunakan API ini dapat lebih responsif dan lebih efisien.
  • Hal ini tidak tunduk pada batas buffering (sebagian besar buffering disetel ke 150 item secara default), dan menghindari kondisi perlombaan antara berbagai konsumen yang mungkin ingin mengubah buffering.
  • Notifikasi pengamat performa dikirim secara asinkron dan browser dapat mengirimkannya selama waktu tidak ada aktivitas untuk menghindari persaingan dengan pekerjaan rendering penting.

Mulai Chrome 52, antarmuka pengamat performa 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 melakukan inisialisasi objek sehingga pengendali kita akan dipanggil setiap kali kumpulan data pengukuran baru siap diproses (dengan data pengukuran yang diteruskan sebagai daftar objek). Pengendali ditentukan 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 berikutnya, atau disalurkan ke alat visualisasi interaktif.
  • Kita mendaftar untuk jenis peristiwa pengaturan waktu yang kita inginkan melalui metode observe() dan memanggil metode mark() untuk menandai saat kita mendaftar, yang akan kita anggap sebagai awal interval pengaturan waktu.
  • Kita menentukan pengendali klik untuk tombol yang ditentukan dalam isi halaman. Pengendali klik ini memanggil metode measure() untuk mengambil data pengaturan waktu tentang kapan tombol diklik.

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

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 akan diteruskan ke pengendali peristiwa kita, secara asinkron tanpa perlu melakukan polling linimasa, yang menampilkan pengukuran di konsol saat terjadi:

Pengamat performa.

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

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