Memahami Aplikasi Web
Aplikasi web berperforma tinggi sangat penting untuk pengalaman pengguna yang luar biasa. Karena aplikasi web menjadi semakin kompleks, memahami dampak performa sangat penting untuk menciptakan pengalaman yang menarik. Selama beberapa tahun terakhir, sejumlah API berbeda telah muncul di browser untuk membantu menganalisis performa jaringan, waktu muat, dll. namun, hal tersebut tidak selalu memberikan detail yang sangat terperinci dengan fleksibilitas yang memadai untuk menemukan apa yang memperlambat aplikasi Anda. Masukkan User Timing API yang menyediakan mekanisme yang dapat digunakan untuk melengkapi aplikasi web guna mengidentifikasi tempat aplikasi menghabiskan waktunya. Dalam artikel ini, kami akan membahas API dan contoh penggunaannya.
Anda tidak bisa mengoptimalkan apa yang tidak dapat diukur
Langkah pertama dalam mempercepat aplikasi web yang lambat adalah mengetahui di mana waktu dihabiskan. Mengukur dampak waktu area kode JavaScript adalah cara yang 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 waktu mendetail yang dapat digunakan untuk membantu pengoptimalan.
Waktu Resolusi Tinggi dan now()
Bagian dasar dari pengukuran waktu yang akurat adalah presisi. Di masa lalu, kita memiliki pengaturan waktu berdasarkan pengukuran milidetik, dan ini tidak masalah, tetapi membangun situs 60 FPS bebas jank berarti setiap frame perlu digambar dalam 16 md. Jadi, jika Anda hanya memiliki akurasi milidetik, akurasi yang diperlukan tidak akan tersedia untuk analisis yang baik. Masukkan High Resolution Time, jenis pengaturan waktu baru yang disertakan dalam browser modern. Waktu Resolusi Tinggi memberi kita stempel waktu floating point yang bisa 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 dari antarmuka Performance. Kode berikut menunjukkan cara melakukannya:
var myTime = window.performance.now();
Ada antarmuka lain yang disebut PerformanceTiming yang memberikan beberapa waktu berbeda terkait cara pemuatan aplikasi web Anda. Metode now() menampilkan waktu yang berlalu sejak waktu navigationStartdi PerformanceTiming terjadi.
Jenis DOMHighResTimeStamp
Saat mencoba menentukan waktu aplikasi web sebelumnya, Anda akan menggunakan sesuatu seperti Date.now() yang menampilkan DOMTimeStamp. DOMTimeStamp menampilkan bilangan bulat dalam 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 berupa floating point, nilainya dapat mewakili pecahan milidetik, sehingga dapat menghasilkan akurasi seperseribu milidetik.
Antarmuka Waktu Pengguna
Jadi setelah kita memiliki stempel waktu resolusi tinggi, mari kita gunakan antarmuka Waktu Pengguna untuk mengambil informasi waktu.
Antarmuka User Timing menyediakan fungsi yang memungkinkan kita memanggil metode di tempat yang berbeda dalam aplikasi yang dapat memberikan jejak breadcrumb gaya Hansel dan Gretel untuk memungkinkan kita melacak di mana waktu digunakan.
Menggunakan mark()
Metode mark() adalah alat utama dalam toolkit analisis waktu kami. Fungsi mark() adalah menyimpan stempel waktu untuk kita. Hal yang sangat berguna dari mark() adalah kita dapat memberi nama stempel waktu, dan API akan mengingat nama serta stempel waktu sebagai satu unit.
Memanggil mark() di berbagai tempat dalam aplikasi memungkinkan Anda mengetahui berapa banyak waktu yang dibutuhkan untuk mencapai 'tanda' di aplikasi web Anda.
Spesifikasi ini memanggil 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 menyetel tanda bernama di seluruh aplikasi web, kita bisa mengumpulkan banyak data pengaturan waktu dan menganalisisnya di waktu luang untuk mengetahui apa yang dilakukan aplikasi dan kapan.
Menghitung pengukuran dengan measure()
Setelah Anda menetapkan banyak tanda pengaturan waktu, Anda akan ingin mengetahui waktu yang berlalu di antara keduanya. Gunakan 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 mana pun di antarmuka PerformanceTiming.
Misalnya, Anda dapat menghitung waktu dari selesainya DOM hingga status aplikasi Anda dimuat sepenuhnya menggunakan kode seperti:
window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');
Saat Anda memanggil measure(), hasilnya akan disimpan terlepas dari tanda yang ditetapkan sehingga Anda dapat mengambilnya nanti. Dengan menyimpan waktu perjalanan 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, ada baiknya jika Anda dapat menghilangkan sejumlah tanda yang telah disiapkan. Misalnya, Anda mungkin melakukan batch run pada aplikasi web dan Anda ingin memulai dari setiap run yang baru.
Cukup mudah untuk menghapus tanda yang telah Anda siapkan dengan memanggil clearMarks().
Dengan demikian, kode contoh di bawah ini akan menghilangkan semua tanda yang ada, sehingga Anda dapat mengatur penghitung waktu lagi jika mau.
window.performance.clearMarks();
Tentu saja, ada beberapa skenario di mana Anda mungkin tidak ingin menghapus semua tanda Anda. Jadi, jika ingin menghapus tanda tertentu, Anda cukup meneruskan nama tanda yang ingin dihapus. Misalnya, kode di bawah ini:
window.peformance.clearMarks('mark_fully_loaded');
menghilangkan tanda yang kita tetapkan di contoh pertama dan membiarkan tanda lain yang kita setel tidak berubah.
Anda mungkin juga ingin menghapus tindakan yang telah dilakukan, dan ada metode yang sesuai untuk melakukannya yang disebut clearMeasures(). Fungsinya sama persis seperti clearMarks(), tetapi berfungsi pada pengukuran yang telah Anda buat. Misalnya, kode:
window.performance.clearMeasures('measure_load_from_dom');
akan menghapus ukuran yang kita buat dalam contoh measure() di atas. Jika Anda ingin menghapus semua tindakan, cara kerjanya sama seperti clearMarks() - karena Anda cukup memanggil clearMeasures() tanpa argumen.
Mendapatkan data waktu
Itu semua adalah baik untuk menetapkan tanda dan mengukur interval, tetapi pada titik tertentu Anda ingin mendapatkan data waktu tersebut untuk melakukan beberapa analisis. Cara ini juga sangat mudah. Anda hanya perlu menggunakan antarmuka PerformanceTimeline.
Misalnya, metode getEntriesByType() memungkinkan kita mendapatkan semua waktu tanda, atau semua waktu pengukuran habis sebagai daftar sehingga kita dapat melakukan iterasi dan memahami data. Yang bagus adalah daftar dikembalikan dalam urutan kronologis, sehingga Anda dapat melihat tanda sesuai urutannya dalam aplikasi web Anda.
Kode di bawah ini:
var items = window.performance.getEntriesByType('mark');
mengembalikan daftar semua tanda yang diklik dalam aplikasi web, sementara kodenya:
var items = window.performance.getEntriesByType('measure');
mengembalikan daftar semua tindakan yang telah kita lakukan.
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 mengembalikan daftar dengan satu item di dalamnya yang berisi stempel waktu 'mark_filled_filled' dengan stempel waktu di properti startTime.
Mengatur waktu permintaan XHR (contoh)
Setelah memiliki gambaran yang baik tentang User Timing API, kita dapat menggunakannya untuk menganalisis berapa lama waktu yang dibutuhkan semua XMLHttpRequests dalam aplikasi web.
Pertama-tama, kita akan mengubah semua permintaan send() untuk melakukan panggilan fungsi yang menyiapkan tanda, dan pada saat yang sama mengubah callback berhasil dengan panggilan fungsi yang menetapkan tanda lain, lalu menghasilkan ukuran durasi permintaan tersebut.
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 ukuran setiap permintaan yang dibuat. Kode untuk melakukannya akan 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 ukuran dengan nilai nama unik untuk setiap XMLHttpRequest yang kami kirim. Kita berasumsi bahwa permintaan berjalan secara berurutan - kode untuk permintaan paralel akan perlu sedikit lebih rumit untuk menangani permintaan yang 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 memberikan banyak alat yang hebat untuk diterapkan pada setiap aspek aplikasi web Anda. Mempersempit hot-spot di aplikasi Anda dapat dengan mudah dilakukan dengan menyebarkan panggilan API di seluruh aplikasi web Anda dan setelah pemrosesan data waktu yang dihasilkan untuk menciptakan gambaran yang jelas tentang tempat waktu yang dihabiskan. Namun, bagaimana jika browser Anda tidak mendukung API ini? Tidak masalah, Anda dapat menemukan polyfill di sini yang mengemulasikan API dengan sangat baik dan juga berfungsi dengan baik dengan webpagetest.org. Jadi, tunggu apa lagi? Cobalah User Timing API pada aplikasi Anda sekarang, Anda akan mengetahui cara mempercepatnya dan pengguna Anda akan berterima kasih karena telah membuat pengalaman mereka jauh lebih baik.