Tata Letak, Paint, dan Komposit: Alur Render

Setelah pohon render dibuat, peramban menjalankan tiga tahap: Tata Letak (menghitung ukuran dan posisi elemen), Penggambaran (mengisi piksel dengan warna, teks, dan gambar), serta Komposit (menggabungkan lapisan yang telah digambar dan menampilkannya di layar).

Tata letak menghitung geometri — lebar, tinggi, dan posisi x/y — untuk setiap elemen. Mengubah properti yang memengaruhi geometri (lebar, batas luar, ruang dalam, ukuran fon, posisi) memicu tata letak untuk elemen tersebut dan kemungkinan seluruh subpohonnya — tahap yang paling mahal.

Penggambaran mengisi piksel untuk setiap lapisan: latar belakang, batas, teks, dan bayangan. Mengubah warna, warna latar, visibilitas, atau radius batas memicu penggambaran ulang tanpa tata letak ulang — lebih murah daripada tata letak, tetapi tetap mahal jika area yang besar digambar ulang.

Kompositor menggabungkan lapisan menggunakan GPU. Properti CSS yang hanya memengaruhi komposit — transformasi dan opasitas — dapat dianimasikan tanpa memicu tata letak atau penggambaran. GPU menanganinya pada 60 frame per detik dengan keterlibatan CPU yang minimal.

csstriggers.com (sekarang dokumentasi sisi peramban) mendokumentasikan properti CSS mana yang memicu tata letak, penggambaran, dan/atau komposit pada setiap mesin peramban. Gunakan untuk mengaudit properti animasi. Utamakan transformasi/opasitas untuk properti yang dianimasikan.

Pengulangan tata letak terjadi ketika JavaScript bergantian membaca properti tata letak (offsetWidth) dan menulis properti gaya dalam satu perulangan. Setiap penulisan membatalkan tata letak; setiap pembacaan memaksa aliran ulang sinkron. Kelompokkan semua pembacaan sebelum semua penulisan untuk menghindari pengulangan.

Hanya transform dan opacity yang sepenuhnya ditangani oleh kompositor ketika elemen berada pada lapisannya sendiri. Menganimasikan properti lain — bahkan kiri/atas — memicu tata letak atau penggambaran pada utas utama dan dapat menyebabkan tampilan tersendat.

Peramban mempromosikan elemen ke lapisan GPU sendiri ketika elemen memiliki perubahan yang akan datang pada transformasi, animasi CSS pada transformasi/opasitas, posisi tetap dengan tetangga yang dikompositkan, atau transformasi 3D. Setiap lapisan menggunakan memori GPU — terlalu banyak lapisan menyebabkan tekanan memori.

Badai pengecatan terjadi ketika sebagian besar halaman mengalami pengecatan ulang pada setiap bingkai. Buat profil di Chrome DevTools → Perenderan → Kilatan pengecatan untuk mengidentifikasi area yang dicat ulang. Pisahkan elemen yang sering dianimasikan ke lapisannya sendiri agar area pengecatan tetap terbatas.

Rekam profil performa di Chrome DevTools. Bagan api menampilkan peristiwa Tata Letak, Pembaruan Pohon Lapisan, Pengecatan, dan Komposit. Bilah tata letak atau pengecatan yang panjang menunjukkan hambatan performa. Upayakan waktu bingkai di bawah 16ms untuk mempertahankan 60fps.

Animasikan dengan transform dan opacity jika memungkinkan. Gunakan clip-path, bukan width/height, untuk animasi penyingkapan—clip-path ramah kompositor pada peramban modern. Hindari menganimasikan box-shadow; gunakan opacity + pseudoelemen dengan bayangan yang telah dirender sebelumnya.

Dua properti CSS apa yang dapat dianimasikan tanpa memicu tata letak atau pengecatan?

Alur perenderan—Tata Letak, Pengecatan, Komposit—menentukan performa animasi. Tata letak paling mahal, pengecatan memiliki biaya sedang, dan properti yang hanya dikompositkan (transform, opacity) ditangani oleh GPU. Memahami pemicunya memungkinkan Anda membuat animasi 60fps yang mulus tanpa perubahan tata letak berulang atau badai pengecatan.