Tampilan mendalam pada browser web modern (bagian 4)

Input masuk ke Compositor

Ini adalah bagian terakhir dari seri blog 4 bagian yang melihat ke dalam Chrome; menyelidiki cara Chrome menangani kode kita untuk menampilkan situs. Dalam postingan sebelumnya, kita telah melihat proses rendering dan mempelajari kompositor. Dalam postingan ini, kita akan melihat cara compositor memungkinkan interaksi yang lancar saat input pengguna masuk.

Memasukkan peristiwa dari sudut pandang browser

Saat mendengar "peristiwa input", Anda mungkin hanya memikirkan pengetikan di kotak teks atau klik mouse, tetapi dari sudut pandang browser, input berarti gestur apa pun dari pengguna. Scroll roda mouse adalah peristiwa input dan sentuh atau mouse over juga merupakan peristiwa input.

Saat gestur pengguna seperti sentuhan pada layar terjadi, proses browser adalah yang menerima gestur pada awalnya. Namun, proses browser hanya mengetahui tempat gestur tersebut terjadi karena konten di dalam tab ditangani oleh proses perender. Jadi, proses browser mengirimkan jenis peristiwa (seperti touchstart) dan koordinatnya ke proses perender. Proses perender menangani peristiwa dengan tepat dengan menemukan target peristiwa dan menjalankan pemroses peristiwa yang terpasang.

Compositor menerima peristiwa input

Di postingan sebelumnya, kita telah melihat cara kompositor dapat menangani scroll dengan lancar dengan menggabungkan lapisan raster. Jika tidak ada pemroses peristiwa input yang dilampirkan ke halaman, thread Compositor dapat membuat frame komposit baru yang sepenuhnya independen dari thread utama. Namun, bagaimana jika beberapa pemroses peristiwa disertakan ke halaman? Bagaimana thread kompositor mengetahui apakah peristiwa perlu ditangani?

Memahami region yang tidak dapat di-scroll dengan cepat

Karena menjalankan JavaScript adalah tugas thread utama, saat halaman dikomposisi, thread kompositor akan menandai area halaman yang memiliki pengendali peristiwa yang dilampirkan sebagai "Area yang Tidak Dapat Di-scroll dengan Cepat". Dengan memiliki informasi ini, thread kompositor dapat memastikan untuk mengirim peristiwa input ke thread utama jika peristiwa terjadi di wilayah tersebut. Jika peristiwa input berasal dari luar region ini, thread compositor akan melanjutkan pengomposisian frame baru tanpa menunggu thread utama.

Perhatikan saat Anda menulis pengendali peristiwa

Pola penanganan peristiwa yang umum dalam pengembangan web adalah delegasi peristiwa. Karena peristiwa berbentuk balon, Anda dapat melampirkan satu pengendali peristiwa di elemen paling atas dan mendelegasikan tugas berdasarkan target peristiwa. Anda mungkin pernah melihat atau menulis kode seperti di bawah ini.

document.body.addEventListener('touchstart', event => {
    if (event.target === area) {
        event.preventDefault();
    }
});

Karena Anda hanya perlu menulis satu pengendali peristiwa untuk semua elemen, ergonomi pola delegasi peristiwa ini menarik. Namun, jika Anda melihat kode ini dari sudut pandang browser, sekarang seluruh halaman ditandai sebagai area yang tidak dapat di-scroll dengan cepat. Artinya, meskipun aplikasi Anda tidak peduli dengan input dari bagian halaman tertentu, thread kompositor harus berkomunikasi dengan thread utama dan menunggunya setiap kali peristiwa input masuk. Dengan demikian, kemampuan scroll yang lancar dari compositor akan dihentikan.

Untuk mengurangi hal ini, Anda dapat meneruskan opsi passive: true di pemroses peristiwa. Hal ini mengisyaratkan kepada browser bahwa Anda masih ingin memproses peristiwa di thread utama, tetapi kompositor juga dapat melanjutkan dan menyusun frame baru.

document.body.addEventListener('touchstart', event => {
    if (event.target === area) {
        event.preventDefault()
    }
 }, {passive: true});

Memeriksa apakah acara dapat dibatalkan

Bayangkan Anda memiliki kotak di halaman yang ingin Anda batasi arah scroll-nya hanya ke scroll horizontal.

Menggunakan opsi passive: true dalam peristiwa pointer berarti scroll halaman dapat berjalan lancar, tetapi scroll vertikal mungkin telah dimulai pada saat Anda ingin preventDefault untuk membatasi arah scroll. Anda dapat memeriksanya menggunakan metode event.cancelable.

document.body.addEventListener('pointermove', event => {
    if (event.cancelable) {
        event.preventDefault(); // block the native scroll
        /*
        *  do what you want the application to do here
        */
    }
}, {passive: true});

Atau, Anda dapat menggunakan aturan CSS seperti touch-action untuk sepenuhnya menghilangkan pengendali peristiwa.

#area {
  touch-action: pan-x;
}

Menemukan target peristiwa

Saat thread kompositor mengirim peristiwa input ke thread utama, hal pertama yang harus dijalankan adalah hit test untuk menemukan target peristiwa. Pengujian hit menggunakan data catatan cat yang dihasilkan dalam proses rendering untuk mengetahui apa yang ada di bawah koordinat titik tempat peristiwa terjadi.

Meminimalkan pengiriman peristiwa ke thread utama

Di postingan sebelumnya, kita telah membahas cara layar standar memuat ulang layar 60 kali per detik dan cara kita harus mengikuti irama untuk animasi yang lancar. Untuk input, perangkat layar sentuh biasa mengirimkan peristiwa sentuh 60-120 kali per detik, dan mouse biasa mengirimkan peristiwa 100 kali per detik. Peristiwa input memiliki fidelitas lebih tinggi daripada yang dapat dimuat ulang oleh layar.

Jika peristiwa berkelanjutan seperti touchmove dikirim ke thread utama 120 kali per detik, hal ini dapat memicu jumlah hit test dan eksekusi JavaScript yang berlebihan dibandingkan dengan seberapa lambat layar dapat dimuat ulang.

Untuk meminimalkan panggilan yang berlebihan ke thread utama, Chrome menggabungkan peristiwa berkelanjutan (seperti wheel, mousewheel, mousemove, pointermove, touchmove ) dan menunda pengiriman hingga tepat sebelum requestAnimationFrame berikutnya.

Setiap peristiwa terpisah seperti keydown, keyup, mouseup, mousedown, touchstart, dan touchend akan segera dikirim.

Gunakan getCoalescedEvents untuk mendapatkan peristiwa intra-frame

Untuk sebagian besar aplikasi web, peristiwa gabungan seharusnya cukup untuk memberikan pengalaman pengguna yang baik. Namun, jika Anda mem-build hal-hal seperti aplikasi gambar dan menempatkan jalur berdasarkan koordinat touchmove, Anda mungkin kehilangan koordinat di antara untuk menggambar garis yang halus. Dalam hal ini, Anda dapat menggunakan metode getCoalescedEvents dalam peristiwa pointer untuk mendapatkan informasi tentang peristiwa gabungan tersebut.

window.addEventListener('pointermove', event => {
    const events = event.getCoalescedEvents();
    for (let event of events) {
        const x = event.pageX;
        const y = event.pageY;
        // draw a line using x and y coordinates.
    }
});

Langkah berikutnya

Dalam seri ini, kita telah membahas cara kerja browser web. Jika Anda belum pernah memikirkan alasan DevTools merekomendasikan penambahan {passive: true} pada pengendali peristiwa atau alasan Anda menulis atribut async di tag skrip, saya harap seri ini menjelaskan alasan browser memerlukan informasi tersebut untuk memberikan pengalaman web yang lebih cepat dan lebih lancar.

Menggunakan Lighthouse

Jika ingin membuat kode Anda terlihat bagus di browser, tetapi tidak tahu harus memulai dari mana, Lighthouse adalah alat yang menjalankan audit situs mana pun dan memberi Anda laporan tentang hal yang sudah dilakukan dengan benar dan hal yang perlu ditingkatkan. Membaca daftar audit juga memberi Anda gambaran tentang hal-hal yang penting bagi browser.

Pelajari cara mengukur performa

Penyesuaian performa dapat bervariasi untuk situs yang berbeda, jadi penting bagi Anda untuk mengukur performa situs dan memutuskan apa yang paling sesuai untuk situs Anda. Tim Chrome DevTools memiliki beberapa tutorial tentang cara mengukur performa situs Anda.

Menambahkan Kebijakan Fitur ke situs Anda

Jika Anda ingin melakukan langkah tambahan, Kebijakan Fitur adalah fitur platform web baru yang dapat menjadi penjaga bagi Anda saat mem-build project. Mengaktifkan kebijakan fitur akan menjamin perilaku tertentu aplikasi dan mencegah Anda membuat kesalahan. Misalnya, jika ingin memastikan aplikasi tidak akan pernah memblokir penguraian, Anda dapat menjalankan aplikasi pada kebijakan skrip sinkron. Jika sync-script: 'none' diaktifkan, JavaScript pemblokir parser akan dicegah agar tidak dieksekusi. Hal ini mencegah kode Anda memblokir parser, dan browser tidak perlu khawatir untuk menjeda parser.

Rangkuman

Ketika saya mulai membuat {i>website<i}, saya hampir hanya memikirkan bagaimana saya akan menulis kode dan apa yang dapat membantu saya menjadi lebih produktif. Hal-hal tersebut penting, tetapi kita juga harus memikirkan cara browser mengambil kode yang kita tulis. Browser modern telah dan terus berinvestasi dalam cara untuk memberikan pengalaman web yang lebih baik bagi pengguna. Dengan memperlakukan browser dengan baik dengan mengatur kode, pengalaman pengguna Anda akan meningkat. Semoga Anda bergabung dengan saya dalam misi untuk bersikap baik kepada browser.

Terima kasih banyak kepada semua orang yang meninjau draf awal seri ini, termasuk (tetapi tidak terbatas pada): Alex Russell, Paul Irish, Meggin Kearney, Eric Bidelman, Mathias Bynens, Addy Osmani, Kinuko Yasuda, Nasko Oskov, dan Charlie Reis.

Apakah Anda menikmati seri ini? Jika ada pertanyaan atau saran untuk postingan mendatang, kami ingin mendengar pendapat Anda di bagian komentar di bawah atau @kosamari di Twitter.