CSS & Rendering Pipeline
Memahami bagaimana browser merender halaman adalah kunci untuk menulis CSS yang performant.
Pipeline Rendering Browser
Setiap frame yang browser render melewati 5 tahap:
- JavaScript — Menjalankan kode yang mengubah DOM/CSSOM
- Style — Menghitung computed styles untuk setiap elemen
- Layout — Menghitung posisi dan ukuran setiap elemen
- Paint — Menggambar pixel (warna, border, shadow, text)
- Composite — Menggabungkan layers menjadi satu tampilan
CSS Properties & Pipeline Cost
- Layout trigger (mahal):
width,height,margin,padding,top,left,font-size - Paint trigger (medium):
color,background,border-color,box-shadow - Composite only (murah):
transform,opacity
Kesimpulan Praktis
Untuk animasi yang smooth 60fps, hanya animate transform dan opacity. Properti lain akan trigger layout/paint ulang yang mahal.
/* BURUK — trigger layout setiap frame */
.animate { transition: left 0.3s, top 0.3s; }
/* BAIK — hanya composite */
.animate { transition: transform 0.3s; }