Performa rendering

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

Pengguna web saat ini berharap bahwa halaman yang mereka kunjungi akan interaktif dan lancar, dan di situlah Anda perlu semakin memfokuskan waktu dan usaha. Halaman tidak hanya dimuat dengan cepat, tetapi juga merespons input pengguna dengan cepat di sepanjang siklus prosesnya. Bahkan, aspek pengalaman pengguna ini merupakan ukuran yang diukur oleh metrik Interaction to Next Paint (INP). INP yang baik berarti halaman yang secara konsisten dan andal responsif terhadap kebutuhan pengguna.

Meskipun komponen utama yang membuat halaman terasa cepat melibatkan jumlah JavaScript yang Anda eksekusi 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 secara kolektif disebut sebagai rendering, dan pekerjaan ini harus dilakukan secepat mungkin agar pengalaman pengguna terasa cepat dan andal.

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

Catatan tentang kecepatan refresh perangkat

Seorang pengguna berinteraksi dengan situs melalui ponsel.
Kecepatan refresh tampilan merupakan pertimbangan penting saat membangun situs yang terasa responsif terhadap input pengguna.

Sebagian besar perangkat saat ini memperbarui layarnya 60 kali dalam satu detik. Setiap refresh menghasilkan output visual yang Anda lihat, dan biasanya dikenal sebagai frame. Dalam video berikut, konsep frame ditunjukkan:

Bingkai seperti yang ditampilkan di panel performa Chrome DevTools. Saat kursor bergerak di atas strip film di dekat bagian atas, representasi setiap frame yang diperbesar akan ditampilkan dalam tooltip saat menu navigasi seluler beralih ke status "terbuka".

Meskipun layar perangkat selalu dimuat ulang pada kecepatan yang konsisten, aplikasi yang berjalan di perangkat mungkin tidak selalu dapat menghasilkan cukup frame untuk cocok dengan 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 biasa diperbarui 60 kali per detik, beberapa perhitungan cepat akan mengungkapkan bahwa browser memiliki waktu 16,66 milidetik untuk menghasilkan setiap frame. Namun pada kenyataannya, browser memiliki overhead-nya sendiri untuk setiap frame sehingga semua pekerjaan Anda harus diselesaikan dalam waktu 10 milidetik. Jika Anda gagal memenuhi anggaran ini, kecepatan frame akan turun, dan konten halaman bergoyang di layar. Fenomena ini sering disebut jank.

Namun, target berubah berdasarkan jenis pekerjaan yang ingin Anda lakukan. Mencapai batas 10 milidetik sangat penting untuk animasi, ketika objek di layar diinterpolasi di seluruh rangkaian frame di antara dua titik. Jika menyangkut perubahan yang berbeda pada antarmuka pengguna—yaitu, berpindah dari satu status ke status lainnya 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 dirujuk, tetapi batas "baik" metrik INP adalah 200 milidetik atau lebih rendah untuk mengakomodasi array perangkat yang lebih luas dengan beragam kemampuan.

Apa pun sasaran Anda—baik itu menghasilkan banyak frame yang dibutuhkan animasi untuk menghindari jank, atau hanya menghasilkan perubahan visual yang 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 Anda sebagai developer web. Kelima area ini adalah area yang Anda miliki kontrol paling besar, dan masing-masing mewakili titik penting dalam pipeline piksel ke layar:

Pipeline piksel penuh, yang berisi lima langkah: JavaScript, Gaya, Tata Letak, Cat, dan Komposit.
Pipeline piksel penuh, diilustrasikan.
  • JavaScript: JavaScript biasanya digunakan untuk menangani pekerjaan yang akan menyebabkan perubahan visual pada antarmuka pengguna. Misalnya, hal ini dapat berupa fungsi animate jQuery, mengurutkan set data, atau menambahkan elemen DOM ke halaman. JavaScript tidak mutlak diperlukan untuk memicu perubahan visual, meskipun: Animasi CSS, transisi CSS, dan Web Animations API dapat menganimasikan konten halaman.
  • Penghitungan gaya: Ini adalah proses untuk mengetahui aturan CSS mana yang berlaku untuk elemen HTML tertentu berdasarkan pemilih yang cocok. Misalnya, .headline adalah contoh pemilih CSS yang berlaku untuk semua elemen HTML dengan nilai atribut class yang berisi class headline. Dari sana, setelah diketahui, aturan akan diterapkan, dan gaya akhir untuk setiap elemen akan dihitung.
  • Tata letak: Setelah mengetahui aturan yang berlaku untuk suatu elemen, browser dapat mulai menghitung geometri halaman, seperti berapa banyak elemen ruang yang digunakan, dan tempat elemen tersebut muncul di layar. Model tata letak web berarti bahwa satu elemen dapat memengaruhi elemen lainnya. Misalnya, lebar elemen <body> biasanya memengaruhi dimensi elemen turunannya di sepanjang ke atas dan ke bawah hierarki, sehingga prosesnya bisa sangat rumit bagi browser.
  • Paint: Menggambar adalah proses pengisian piksel. Proses ini melibatkan penggambaran teks, warna, gambar, batas, bayangan, dan pada dasarnya setiap aspek visual elemen setelah tata letaknya di halaman telah dihitung. Menggambar biasanya dilakukan pada beberapa permukaan, sering disebut layer.
  • Gabungan: Karena bagian-bagian halaman berpotensi digambar ke beberapa lapisan, bagian tersebut harus diterapkan ke layar dalam urutan yang benar agar halaman dirender seperti yang diharapkan. Hal ini sangat penting untuk elemen yang tumpang-tindih dengan elemen yang lain, karena kesalahan dapat menyebabkan satu elemen muncul di atas elemen lainnya secara salah.

Setiap bagian pipeline piksel ini mewakili peluang untuk memperkenalkan jank pada animasi, atau menunda penggambaran frame bahkan untuk perubahan visual yang terpisah pada antarmuka pengguna. Oleh karena itu, penting untuk memahami dengan tepat bagian mana dari pipeline 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 "rasterize" yang digunakan bersama dengan "paint". Ini karena mengecat sebenarnya adalah dua tugas:

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

Yang kedua disebut "rasterisasi", jadi setiap kali melihat catatan paint di DevTools, Anda harus menganggapnya sebagai termasuk rasterisasi. Dalam beberapa arsitektur, pembuatan daftar panggilan gambar dan rasterisasi dilakukan pada thread yang berbeda, tetapi hal tersebut tidak berada di bawah kendali Anda sebagai developer.

Anda tidak harus selalu menyentuh setiap bagian pipeline di setiap bingkai. Sebenarnya, ada tiga cara yang biasanya dijalankan pipeline untuk frame tertentu saat Anda membuat perubahan visual, baik dengan JavaScript, CSS, maupun Web Animations API.

1. JS / CSS > Gaya > Tata Letak > Paint > Composite

Pipeline piksel penuh, tanpa ada langkah yang dihilangkan.

Jika Anda mengubah properti "tata letak", seperti properti yang mengubah geometri elemen seperti lebar, tinggi, atau posisinya (seperti properti CSS left atau top), browser harus memeriksa semua elemen lainnya dan "mengubah posisi/geometri" halaman. Area yang terpengaruh perlu digambar ulang, dan elemen hasil penggambaran akhir harus disusun kembali bersama-sama.

2. JS / CSS > Gaya > Paint > Composite

Pipeline piksel dengan langkah tata letak dihilangkan.

Jika Anda mengubah properti "hanya paint-only" 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 dan dapat berkontribusi pada latensi yang signifikan dalam menghasilkan frame berikutnya.

3. JS / CSS > Gaya > Komposit

Pipeline piksel dengan langkah tata letak dan menggambar dihilangkan.

Jika Anda mengubah properti yang tidak memerlukan tata letak atau paint, browser dapat langsung menuju 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 compositor jika memungkinkan. Artinya, meskipun halaman tidak merespons, Anda masih dapat men-scroll halaman dan melihat bagiannya yang sebelumnya digambar ke layar.

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

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

Pengoptimalan Rendering Browser

Screenshot kursus Udacity

Performa penting bagi pengguna, dan untuk menciptakan pengalaman pengguna yang baik, developer web harus membuat situs yang bereaksi dengan cepat terhadap interaksi pengguna dan merendernya dengan lancar. Pakar performa Paul Lewis siap membantu Anda menghancurkan jank dan membuat aplikasi web yang mempertahankan performa 60 frame per detik. Anda akan menyerahkan 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 mengungkap pola yang mempermudah pembuatan situs cepat yang akan menyenangkan bagi pengguna untuk digunakan.

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