Memahami Aplikasi Web
Aplikasi web berperforma tinggi sangat penting untuk pengalaman pengguna yang luar biasa. Seiring dengan semakin 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., tetapi API ini tidak selalu memberikan detail terperinci dengan fleksibilitas yang memadai untuk menemukan penyebab pelambatan aplikasi Anda. Masukkan User Timing API yang menyediakan mekanisme yang dapat Anda gunakan untuk menginstrumentasikan aplikasi web guna mengidentifikasi tempat aplikasi menghabiskan waktunya. Dalam artikel ini, kami akan membahas API beserta contoh cara menggunakannya.
Anda tidak dapat mengoptimalkan sesuatu yang tidak dapat diukur
Langkah pertama dalam mempercepat aplikasi web yang lambat adalah mengetahui tempat waktu dihabiskan. Mengukur dampak waktu 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 melakukan pengoptimalan.
Waktu Resolusi Tinggi dan now()
Bagian mendasar dari pengukuran waktu yang akurat adalah presisi. Dulu, kami memiliki pengaturan waktu berdasarkan pengukuran milidetik yang tidak masalah, tetapi membuat situs 60 FPS bebas jank berarti setiap frame harus digambar dalam 16 md. Jadi, jika Anda hanya memiliki akurasi milidetik, presisi yang diperlukan untuk analisis yang baik tidak akan tercapai. Masukkan High Resolution Time, jenis pengaturan waktu baru yang disertakan dalam browser modern. Waktu Resolusi Tinggi memberi kita stempel waktu floating point yang dapat akurat hingga resolusi mikrodetik - seribu kali lebih baik dari sebelumnya.
Untuk mendapatkan waktu saat ini di aplikasi web Anda, panggil metode now() yang membentuk ekstensi antarmuka Performa. Kode berikut menunjukkan cara melakukannya:
var myTime = window.performance.now();
Ada antarmuka lain yang disebut PerformanceTiming yang memberikan sejumlah waktu yang berbeda terkait cara aplikasi web Anda dimuat. Metode now() menampilkan waktu yang berlalu sejak waktu navigationStart di PerformanceTiming terjadi.
Jenis DOMHighResTimeStamp
Saat mencoba mengatur waktu aplikasi web sebelumnya, 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 floating point, nilainya dapat mewakili milidetik pecahan, sehingga dapat menghasilkan akurasi seperseribu milidetik.
Antarmuka Waktu Pengguna
Jadi, setelah kita memiliki stempel waktu beresolusi tinggi, mari kita gunakan antarmuka User Timing untuk mengambil informasi pengaturan waktu.
Antarmuka User Timing menyediakan fungsi yang memungkinkan kita memanggil metode di berbagai tempat dalam aplikasi yang dapat memberikan jejak breadcrumb gaya Hansel dan Gretel untuk memungkinkan kita melacak tempat waktu dihabiskan.
Menggunakan mark()
Metode mark() adalah alat utama dalam toolkit analisis pengaturan waktu kami. Yang dilakukan mark() adalah menyimpan stempel waktu untuk kita. Yang sangat berguna dari mark() adalah kita dapat memberi nama stempel waktu, dan API akan mengingat nama dan stempel waktu sebagai satu unit.
Memanggil mark() di berbagai tempat dalam aplikasi memungkinkan Anda 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 kapan saja untuk mengetahui apa yang dilakukan aplikasi dan kapan.
Menghitung pengukuran dengan measure()
Setelah menetapkan banyak tanda waktu, Anda perlu mengetahui waktu yang berlalu di antara tanda 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 terkenal di antarmuka PerformanceTiming.
Misalnya, Anda dapat menghitung waktu dari DOM selesai hingga status aplikasi dimuat sepenuhnya menggunakan kode seperti:
window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');
Saat Anda memanggil measure(), metode ini akan menyimpan hasilnya terlepas dari tanda yang Anda tetapkan, sehingga Anda dapat mengambilnya nanti. Dengan menyimpan waktu saat aplikasi berjalan, aplikasi tetap responsif, dan Anda dapat membuang semua data setelah aplikasi menyelesaikan beberapa pekerjaan sehingga dapat dianalisis nanti.
Menghapus tanda dengan clearMarks()
Terkadang ada gunanya untuk dapat menghapus banyak tanda yang telah Anda siapkan. Misalnya, Anda mungkin melakukan operasi batch di aplikasi web, sehingga Anda ingin memulai dari awal setiap kali menjalankannya.
Anda dapat menghapus tanda yang telah disiapkan dengan mudah dengan memanggil clearMarks().
Jadi, contoh kode di bawah akan menghapus semua tanda yang ada, sehingga Anda dapat menyiapkan waktu berjalan 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 tanpa mengubah tanda lain yang kita tetapkan.
Anda mungkin juga ingin menghapus semua tindakan yang telah dibuat, dan ada metode yang sesuai untuk melakukannya yang disebut clearMeasures(). Cara kerjanya sama persis dengan clearMarks(), tetapi bekerja 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 hanya memanggil clearMeasures() tanpa argumen.
Mendapatkan data pengaturan waktu
Anda dapat menetapkan tanda dan mengukur interval, tetapi pada suatu saat Anda ingin mendapatkan data pengaturan waktu tersebut untuk melakukan beberapa analisis. Cara ini juga sangat sederhana, yang perlu Anda lakukan hanyalah menggunakan antarmuka PerformanceTimeline.
Misalnya, metode getEntriesByType() memungkinkan kita mendapatkan semua waktu tanda, atau semua waktu pengukuran sebagai daftar sehingga kita dapat melakukan iterasi dan mencerna data. Yang bagus adalah daftar ditampilkan dalam urutan kronologis, sehingga Anda dapat melihat tanda dalam urutan saat tanda tersebut diklik di aplikasi web Anda.
Kode di bawah ini:
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 tindakan yang telah kita buat.
Anda juga bisa mendapatkan kembali daftar entri menggunakan nama tertentu 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.
Menentukan waktu permintaan XHR (contoh)
Setelah memiliki gambaran yang cukup tentang User Timing API, kita dapat menggunakannya untuk menganalisis berapa lama waktu yang diperlukan 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 sukses dengan panggilan fungsi yang menetapkan tanda lain, lalu menghasilkan pengukuran berapa lama permintaan tersebut berlangsung.
Jadi, biasanya XMLHttpRequest kita akan terlihat seperti ini:
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 pengukuran untuk setiap permintaan yang dibuat. Kode untuk melakukannya terlihat seperti ini:
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 unik untuk setiap XMLHttpRequest yang kita kirim. Kita mengasumsikan bahwa permintaan berjalan secara berurutan - kode untuk permintaan paralel harus sedikit lebih kompleks untuk menangani permintaan yang ditampilkan secara tidak berurutan, kita akan membiarkannya sebagai latihan bagi pembaca.
Setelah aplikasi web melakukan banyak permintaan, kita dapat membuang semuanya ke konsol menggunakan kode di bawah ini:
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 hebat untuk diterapkan ke aspek apa pun pada aplikasi web Anda. Mempersempit hot spot di aplikasi Anda dapat dengan mudah dilakukan dengan menyebarkan panggilan API di seluruh aplikasi web Anda dan memproses ulang data pengaturan waktu yang dihasilkan untuk membuat gambaran yang jelas tentang tempat waktu dihabiskan. Namun, bagaimana jika browser Anda tidak mendukung API ini? Tidak masalah, Anda dapat menemukan polyfill yang bagus di sini yang mengemulasikan API dengan sangat baik dan juga berfungsi dengan baik dengan 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.