Memahami Aplikasi Web Anda
Aplikasi web berperforma tinggi sangat penting untuk pengalaman pengguna yang luar biasa. Seiring dengan makin kompleksnya aplikasi web, memahami dampak performa sangat penting untuk menciptakan pengalaman yang menarik. Selama beberapa tahun terakhir, sejumlah API yang berbeda telah muncul di browser untuk membantu menganalisis performa jaringan, waktu pemuatan, dll. Namun, API ini tidak selalu memberikan detail yang mendetail dengan fleksibilitas yang memadai untuk menemukan penyebab aplikasi Anda melambat. Masukkan User Timing API yang menyediakan mekanisme yang dapat Anda gunakan untuk melengkapi aplikasi web Anda guna mengidentifikasi bagian mana dari aplikasi Anda yang menghabiskan waktu. Dalam artikel ini, kami akan membahas API tersebut beserta contoh cara menggunakannya.
Anda tidak dapat mengoptimalkan hal yang tidak dapat Anda ukur
Langkah pertama dalam mempercepat aplikasi web yang lambat adalah mencari tahu di mana waktu dihabiskan. Mengukur dampak waktu dari area kode JavaScript adalah cara ideal untuk mengidentifikasi hot spot, yang merupakan langkah pertama dalam menemukan cara meningkatkan performa. Untungnya, User Timing API menyediakan cara agar Anda dapat menyisipkan panggilan API di berbagai bagian JavaScript, lalu mengekstrak data pengaturan waktu mendetail yang dapat digunakan untuk membantu Anda mengoptimalkan.
Waktu resolusi tinggi dan now()
Bagian mendasar dari pengukuran waktu yang akurat adalah presisi. Dulu, kita memiliki pengaturan waktu berdasarkan pengukuran milidetik yang tidak masalah, tetapi membangun situs 60 FPS bebas jank berarti setiap frame harus digambar dalam 16 milidetik. Jadi, jika Anda hanya memiliki akurasi milidetik, akurasi tersebut tidak memiliki presisi yang diperlukan untuk analisis yang baik. Masukkan High Resolution Time, jenis pengaturan waktu baru yang disertakan dalam browser modern. High Resolution Time memberi kita stempel waktu floating point yang dapat akurat hingga resolusi mikrodetik - seribu kali lebih baik daripada sebelumnya.
Untuk mendapatkan waktu saat ini di aplikasi web Anda, panggil metode now() yang membentuk ekstensi antarmuka Performance. Kode berikut menunjukkan cara melakukannya:
var myTime = window.performance.now();
Ada antarmuka lain yang disebut PerformanceTiming yang menyediakan sejumlah waktu berbeda terkait cara aplikasi web Anda dimuat. Metode now() menampilkan waktu yang berlalu sejak navigationStartwaktu di PerformanceTiming terjadi.
Jenis DOMHighResTimeStamp
Saat mencoba mengatur waktu aplikasi web di masa lalu, Anda akan menggunakan sesuatu seperti Date.now() yang menampilkan DOMTimeStamp. DOMTimeStamp menampilkan bilangan bulat milidetik sebagai nilainya. Untuk memberikan akurasi yang lebih tinggi yang diperlukan untuk Waktu Resolusi Tinggi, jenis baru yang disebut DOMHighResTimeStamp diperkenalkan. Jenis ini adalah nilai floating point yang juga menampilkan waktu dalam milidetik. Namun, karena merupakan floating point, nilai tersebut dapat mewakili pecahan milidetik, sehingga dapat menghasilkan akurasi seperseribu milidetik.
Antarmuka Waktu Pengguna
Setelah kita memiliki stempel waktu resolusi tinggi, mari gunakan antarmuka Waktu Pengguna untuk menarik informasi pengaturan waktu.
Antarmuka Waktu Pengguna menyediakan fungsi yang memungkinkan kita memanggil metode di berbagai tempat dalam aplikasi yang dapat memberikan jejak breadcrumb bergaya Hansel dan Gretel untuk memungkinkan kita melacak di mana waktu dihabiskan.
Menggunakan mark()
Metode mark() adalah alat utama dalam toolkit analisis pengaturan waktu kami. mark() menyimpan stempel waktu untuk kita. Hal yang sangat berguna dari mark() adalah kita dapat memberi nama stempel waktu, dan API akan mengingat nama dan stempel waktu sebagai satu unit.
Dengan memanggil mark() di berbagai tempat dalam aplikasi, Anda dapat mengetahui berapa lama waktu yang diperlukan untuk mencapai 'tanda' tersebut di aplikasi web Anda.
Spesifikasi ini menyebutkan sejumlah nama yang disarankan untuk tanda yang mungkin menarik dan cukup jelas, seperti mark_fully_loaded, mark_fully_visible,mark_above_the_fold, dll.
Misalnya, kita dapat menetapkan tanda saat aplikasi dimuat sepenuhnya menggunakan kode berikut:
window.performance.mark('mark_fully_loaded');
Dengan menetapkan tanda bernama di seluruh aplikasi web, kita dapat mengumpulkan banyak data pengaturan waktu dan menganalisisnya sesuai keinginan untuk mengetahui apa yang dilakukan aplikasi dan kapan.
Menghitung pengukuran dengan measure()
Setelah menetapkan beberapa tanda waktu, Anda perlu mengetahui waktu yang berlalu di antara tanda waktu tersebut. Anda menggunakan metode measure() untuk melakukannya.
Metode measure() menghitung waktu yang berlalu di antara tanda, dan juga dapat mengukur waktu antara tanda Anda dan nama peristiwa umum di antarmuka PerformanceTiming.
Misalnya, Anda dapat menghitung waktu dari DOM selesai hingga status aplikasi Anda dimuat sepenuhnya dengan menggunakan kode seperti:
window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');
Saat Anda memanggil measure(), hasilnya akan disimpan secara independen dari tanda yang Anda tetapkan, sehingga Anda dapat mengambilnya nanti. Dengan menyimpan waktu saat aplikasi berjalan, aplikasi akan tetap responsif, dan Anda dapat membuang semua data setelah aplikasi menyelesaikan beberapa pekerjaan sehingga dapat dianalisis nanti.
Menghapus tanda dengan clearMarks()
Terkadang, Anda perlu menghapus banyak tanda yang telah Anda siapkan. Misalnya, Anda mungkin melakukan batch run pada aplikasi web, sehingga Anda ingin memulai dari awal setiap kali menjalankan aplikasi.
Cukup mudah untuk menghapus tanda yang telah Anda siapkan dengan memanggil clearMarks().
Jadi, contoh kode di bawah akan menghapus semua tanda yang ada, sehingga Anda dapat menyiapkan operasi pengaturan waktu lagi jika mau.
window.performance.clearMarks();
Tentu saja, ada beberapa skenario saat Anda mungkin tidak ingin menghapus semua tanda. Jadi, jika ingin menghapus tanda tertentu, Anda cukup meneruskan nama tanda yang ingin dihapus. Misalnya, kode di bawah:
window.performance.clearMarks('mark_fully_loaded');
menghapus tanda yang kita tetapkan dalam contoh pertama, sementara tanda lain yang kita tetapkan tidak berubah.
Anda mungkin juga ingin menghapus pengukuran yang telah dibuat, dan ada metode yang sesuai untuk melakukannya, yang disebut clearMeasures(). Cara kerjanya sama persis dengan clearMarks(), tetapi berfungsi pada pengukuran apa pun yang telah Anda buat. Misalnya, kode:
window.performance.clearMeasures('measure_load_from_dom');
akan menghapus pengukuran yang kita buat dalam contoh measure() di atas. Jika Anda ingin menghapus semua ukuran, cara kerjanya sama seperti clearMarks() - yaitu Anda cukup memanggil clearMeasures() tanpa argumen.
Mendapatkan data pengaturan waktu
Menetapkan tanda dan mengukur interval memang bagus, tetapi pada titik tertentu, Anda ingin mendapatkan data pengaturan waktu tersebut untuk melakukan analisis. Hal ini juga sangat sederhana, Anda hanya perlu menggunakan antarmuka PerformanceTimeline.
Misalnya, metode getEntriesByType() memungkinkan kita mendapatkan semua waktu penanda, atau semua waktu pengukuran sebagai daftar sehingga kita dapat melakukan iterasi dan mencerna data. Hal yang menarik adalah daftar tersebut ditampilkan dalam urutan kronologis, sehingga Anda dapat melihat tanda sesuai urutan kemunculannya di aplikasi web Anda.
Kode di bawah:
var items = window.performance.getEntriesByType('mark');
menampilkan daftar semua tanda yang telah dicapai di aplikasi web kita, sedangkan kode:
var items = window.performance.getEntriesByType('measure');
menampilkan daftar semua pengukuran yang telah kita buat.
Anda juga bisa mendapatkan kembali daftar entri menggunakan nama spesifik yang telah Anda berikan. Jadi, misalnya, kode:
var items = window.performance.getEntriesByName('mark_fully_loaded');
akan menampilkan daftar dengan satu item di dalamnya yang berisi stempel waktu 'mark_fully_loaded' di properti startTime.
Menghitung waktu permintaan XHR (contoh)
Setelah memiliki gambaran yang cukup tentang User Timing API, kita dapat menggunakannya untuk menganalisis berapa lama waktu yang dibutuhkan semua XMLHttpRequests di aplikasi web kita.
Pertama, kita akan mengubah semua permintaan send() untuk mengeluarkan panggilan fungsi yang menyiapkan tanda, dan pada saat yang sama mengubah callback keberhasilan kita dengan panggilan fungsi yang menetapkan tanda lain, lalu menghasilkan ukuran durasi permintaan.
Jadi, biasanya XMLHttpRequest kita akan terlihat seperti:
var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
do_something(e.responseText);
}
myReq.send();
Untuk contoh ini, kita akan menambahkan penghitung global untuk melacak jumlah permintaan dan juga menggunakannya untuk menyimpan ukuran untuk setiap permintaan yang dibuat. Kode untuk melakukannya terlihat seperti:
var reqCnt = 0;
var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
window.performance.mark('mark_end_xhr');
reqCnt++;
window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr');
do_something(e.responseText);
}
window.performance.mark('mark_start_xhr');
myReq.send();
Kode di atas menghasilkan pengukuran dengan nilai nama yang unik untuk setiap XMLHttpRequest yang kita kirim. Kami berasumsi bahwa permintaan berjalan secara berurutan - kode untuk permintaan paralel harus sedikit lebih kompleks untuk menangani permintaan yang ditampilkan tidak berurutan, kami akan menyerahkan hal ini sebagai latihan bagi pembaca.
Setelah aplikasi web melakukan banyak permintaan, kita dapat membuang semuanya ke konsol menggunakan kode di bawah:
var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length; ++i) {
var req = items[i];
console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');
}
Kesimpulan
User Timing API memberi Anda banyak alat yang bagus untuk diterapkan ke aspek apa pun dari aplikasi web Anda. Mempersempit hot-spot dalam aplikasi Anda dapat dengan mudah dicapai dengan menyebarkan panggilan API di seluruh aplikasi web Anda dan memproses data pengaturan waktu yang dihasilkan untuk membuat gambaran yang jelas tentang di mana waktu dihabiskan. Namun, bagaimana jika browser Anda tidak mendukung API ini? Jangan khawatir, Anda dapat menemukan polyfill yang bagus di sini yang mengemulasi API dengan sangat baik dan juga berfungsi dengan baik di webpagetest.org. Jadi, tunggu apa lagi? Coba User Timing API di aplikasi Anda sekarang, Anda akan mengetahui cara mempercepatnya dan pengguna akan berterima kasih karena Anda telah membuat pengalaman mereka jauh lebih baik.