Performa rendering

Pengguna akan memperhatikan jika situs dan aplikasi tidak berjalan dengan baik, jadi mengoptimalkan performa rendering sangatlah penting.

Pengguna web saat ini mengharapkan halaman yang mereka kunjungi bersifat interaktif dan lancar, dan di sinilah Anda perlu semakin memfokuskan waktu dan upaya Anda. Halaman tidak hanya harus dimuat dengan cepat, tetapi juga merespons input pengguna dengan cepat sepanjang siklus prosesnya. Faktanya, aspek pengalaman pengguna ini adalah hal yang diukur oleh metrik Interaction to Next Paint (INP). INP yang baik berarti halaman secara konsisten dan andal merespons kebutuhan pengguna.

Meskipun komponen utama yang membuat halaman terasa cepat melibatkan jumlah JavaScript yang Anda jalankan sebagai respons terhadap interaksi pengguna, yang diantisipasi pengguna adalah perubahan visual pada antarmuka pengguna. Perubahan visual pada antarmuka pengguna adalah hasil dari beberapa jenis pekerjaan, yang sering kali secara kolektif disebut sebagai rendering, dan pekerjaan ini harus dilakukan secepat mungkin sehingga pengalaman pengguna terasa cepat dan andal.

Untuk menulis halaman yang merespons interaksi pengguna dengan cepat, Anda perlu memahami cara HTML, JavaScript, dan CSS ditangani oleh browser, serta memastikan bahwa kode yang Anda tulis—serta kode pihak ketiga lainnya yang Anda sertakan—berjalan sesefisien mungkin.

Catatan tentang kecepatan refresh perangkat

Sebagian besar perangkat saat ini memuat ulang layarnya 60 kali per detik. Setiap refresh menghasilkan output visual yang Anda lihat, dan umumnya dikenal sebagai frame. Dalam video berikut, konsep frame ditunjukkan:

Meskipun layar perangkat selalu dimuat ulang dengan kecepatan yang konsisten, aplikasi yang berjalan di perangkat mungkin tidak selalu dapat menghasilkan frame yang cukup untuk mencocokkan kecepatan refresh tersebut. Misalnya, jika ada animasi atau transisi yang berjalan, browser harus mencocokkan kecepatan refresh perangkat untuk menghasilkan satu frame setiap kali layar dimuat ulang.

Mengingat bahwa tampilan standar dimuat ulang 60 kali per detik, beberapa hitungan cepat akan mengungkapkan bahwa browser memiliki 16,66 milidetik untuk menghasilkan setiap frame. Namun, pada kenyataannya, browser memiliki overhead sendiri untuk setiap frame, sehingga semua pekerjaan Anda harus diselesaikan dalam waktu 10 milidetik. Jika Anda gagal memenuhi anggaran ini, kecepatan frame akan menurun, dan konten halaman akan bergetar di layar. Fenomena ini sering disebut jank.

Namun, target Anda berubah berdasarkan jenis pekerjaan yang Anda coba lakukan. Memenuhi nilai minimum 10 milidetik sangat penting untuk animasi, dengan objek di layar diinterpolasi di seluruh rangkaian frame di antara dua titik. Dalam hal perubahan terpisah di antarmuka pengguna—yaitu, melanjutkan dari satu status ke status lain tanpa gerakan di antaranya—sebaiknya Anda mencapai perubahan tersebut dalam jangka waktu yang terasa instan bagi pengguna. Dalam kasus seperti ini, 100 milidetik adalah angka yang sering dikutip, tetapi nilai minimum "baik" metrik INP adalah 200 milidetik atau lebih rendah untuk menampung berbagai perangkat dengan kemampuan yang bervariasi.

Apa pun sasaran Anda—baik itu menghasilkan banyak frame yang diperlukan animasi untuk menghindari jank, atau hanya menghasilkan perubahan visual terpisah di antarmuka pengguna secepat mungkin—memahami cara kerja pipeline piksel browser sangat penting untuk pekerjaan Anda.

Pipeline piksel

Ada lima area utama yang perlu Anda ketahui dan perhatikan dalam pekerjaan sebagai developer web. Lima area ini adalah area yang paling Anda kontrol, dan masing-masing mewakili titik penting dalam pipeline piksel ke layar:

• JavaScript: JavaScript biasanya digunakan untuk menangani tugas yang akan menghasilkan perubahan visual pada antarmuka pengguna. Misalnya, ini dapat berupa fungsi jQuery animate, mengurutkan set data, atau menambahkan elemen DOM ke halaman. Namun, JavaScript tidak mutlak diperlukan untuk memicu perubahan visual: animasi CSS, transisi CSS, dan Web Animations API mampu mengoanimasi konten halaman.
• Penghitungan gaya: Ini adalah proses untuk mengetahui aturan CSS mana yang berlaku untuk elemen HTML mana berdasarkan pemilih yang cocok. Misalnya, .headline adalah contoh pemilih CSS yang berlaku untuk elemen HTML apa pun dengan nilai atribut class yang berisi class headline. Dari sini, setelah aturan diketahui, aturan tersebut akan diterapkan, dan gaya akhir untuk setiap elemen akan dihitung.
• Tata letak: Setelah mengetahui aturan mana yang berlaku untuk suatu elemen, browser dapat mulai menghitung geometri halaman, seperti jumlah ruang yang digunakan elemen, dan tempat elemen tersebut muncul di layar. Model tata letak web berarti satu elemen dapat memengaruhi elemen lainnya. Misalnya, lebar elemen <body> biasanya memengaruhi dimensi elemen turunannya di seluruh pohon, sehingga prosesnya bisa cukup rumit untuk browser.
• Paint: Proses pengisian piksel disebut painting. Hal ini melibatkan penggambaran teks, warna, gambar, batas, bayangan, dan pada dasarnya setiap aspek visual elemen setelah tata letaknya di halaman dihitung. Gambar biasanya dilakukan di beberapa platform, yang sering disebut lapisan.
• Gabungan: Karena bagian halaman berpotensi digambar ke beberapa lapisan, bagian tersebut harus diterapkan ke layar dalam urutan yang benar sehingga halaman dirender seperti yang diharapkan. Hal ini sangat penting untuk elemen yang tumpang-tindih, karena kesalahan dapat menyebabkan satu elemen muncul di atas elemen lain secara tidak benar.

Setiap bagian pipeline piksel ini mewakili peluang untuk menyebabkan jank dalam animasi, atau menunda proses menggambar frame bahkan untuk perubahan visual terpisah pada antarmuka pengguna. Oleh karena itu, penting untuk memahami dengan tepat bagian pipeline mana yang dipicu kode Anda, dan untuk menyelidiki apakah Anda dapat membatasi perubahan hanya pada bagian pipeline piksel yang diperlukan untuk merendernya.

Anda mungkin pernah mendengar istilah "rasterisasi" yang digunakan bersama dengan "cat". Hal ini karena proses melukis sebenarnya terdiri dari dua tugas:

1. Membuat daftar panggilan gambar.
2. Mengisi piksel.

Yang terakhir disebut "rasterisasi", jadi setiap kali Anda melihat data cat di DevTools, Anda harus menganggapnya sebagai termasuk rasterisasi. Dalam beberapa arsitektur, pembuatan daftar panggilan gambar dan rasterisasi dilakukan di thread yang berbeda, tetapi hal itu tidak berada di bawah kontrol Anda sebagai developer.

Anda tidak perlu selalu menyentuh setiap bagian pipeline pada setiap frame. Faktanya, ada tiga cara pipeline biasanya diputar untuk frame tertentu saat Anda membuat perubahan visual, baik dengan JavaScript, CSS, maupun Web Animations API.

1. JS / CSS > Gaya > Tata Letak > Cat > Gabungan

Jika Anda mengubah properti "tata letak", seperti properti yang mengubah geometri elemen seperti lebar, tinggi, atau posisinya (seperti properti CSS left atau top), browser perlu memeriksa semua elemen lain dan "mengalirkan ulang" halaman. Setiap area yang terpengaruh harus dicat ulang, dan elemen yang dicat akhir harus digabungkan kembali.

2. JS / CSS > Gaya > Cat > Gabungan

Jika Anda mengubah properti "hanya cat" untuk elemen di CSS—misalnya, properti seperti background-image, color, atau box-shadow—langkah tata letak tidak diperlukan untuk melakukan update visual ke halaman. Dengan menghilangkan langkah tata letak—jika memungkinkan—Anda menghindari pekerjaan tata letak yang berpotensi mahal yang dapat berkontribusi pada latensi yang signifikan dalam menghasilkan frame berikutnya.

3. JS / CSS > Gaya > Komposisi

Jika Anda mengubah properti yang tidak memerlukan tata letak atau cat, browser dapat langsung melompat ke langkah komposisi. Ini adalah jalur termurah dan paling diinginkan melalui pipeline piksel untuk titik tekanan tinggi dalam siklus proses halaman, seperti animasi atau scroll. Fakta menarik: Chromium mengoptimalkan scroll halaman sehingga hanya terjadi di thread kompositor jika memungkinkan, yang berarti meskipun halaman tidak merespons, Anda masih dapat men-scroll halaman dan melihat bagian-bagiannya yang sebelumnya digambar ke layar.

Performa web adalah seni menghindari pekerjaan, sekaligus meningkatkan efisiensi pekerjaan yang diperlukan sebanyak mungkin. Dalam banyak kasus, hal ini berkaitan dengan cara kerja browser, bukan melawannya. Perlu diingat bahwa pekerjaan yang sebelumnya ditampilkan dalam pipeline berbeda dalam hal biaya komputasi; beberapa tugas pada dasarnya lebih mahal daripada yang lain.

Mari kita pelajari berbagai bagian pipeline. Kita akan melihat masalah umum, serta cara mendiagnosis dan memperbaikinya.

Pengoptimalan Rendering Browser

Performa penting bagi pengguna, dan untuk membangun pengalaman pengguna yang baik, developer web harus membuat situs yang bereaksi cepat terhadap interaksi pengguna dan merender dengan lancar. Pakar performa Paul Lewis siap membantu Anda menghilangkan jank dan membuat aplikasi web yang mempertahankan performa 60 frame per detik. Anda akan menyelesaikan kursus ini dengan alat yang diperlukan untuk membuat profil aplikasi, dan mengidentifikasi penyebab performa rendering yang kurang optimal. Anda juga akan mempelajari pipeline rendering browser dan menemukan pola yang mempermudah pembuatan situs cepat yang akan menyenangkan bagi pengguna.

Ini adalah kursus gratis yang ditawarkan melalui Udacity, dan Anda dapat mengikutinya kapan saja.