Tiap kali kamu membuka halaman, browser mengubah HTML dan CSS jadi piksel, titik-titik warna kecil di layar. Prosesnya lewat beberapa tahap yang selalu berurutan, disebut rendering pipeline. Kalau kenal tahapnya, kamu bisa menebak kenapa ada perubahan yang bikin halaman tersendat dan ada yang tetap mulus.
🧪 Tebakan cepat: buat animasi kotak bergeser ke kanan, mana yang lebih ringan buat browser, mengubah
leftatautransform? Jawabannya ada di bagian "Perubahan beda, tahap beda".
Enam tahap dari kode ke layar
Ambil halaman kecil ini:
<style>
.kotak { width: 120px; background: tomato; }
</style>
<div class="kotak">Halo</div>
Browser mengolahnya dalam enam tahap, berurutan:
- DOM. Browser membaca (parse) HTML dari atas ke bawah.
<div class="kotak">Halo</div>masuk ke DOM, singkatan dari Document Object Model: pohon berisi semua elemen halaman. JavaScript mengubah halaman lewat DOM ini. - CSSOM. Aturan
.kotak { ... }masuk ke CSSOM (CSS Object Model), kumpulan semua aturan style. - Style. Aturan CSSOM dicocokkan ke tiap elemen DOM. Elemen yang gak tampil, misalnya
display: none, dibuang. Hasilnya disebut render tree. - Layout. Browser menghitung posisi dan ukuran tiap elemen: kotak ini lebarnya 120px, di pojok kiri atas.
- Paint. Browser mewarnai pikselnya: latar merah tomat dan teks Halo.
- Composite. Hasil paint bisa terbagi ke beberapa lapisan (layer). Browser menumpuknya jadi satu gambar di layar, dibantu GPU (chip grafis).
Jadi urutannya: parse HTML, DOM, CSSOM, render tree, Layout, Paint, Composite.
Perubahan beda, tahap beda
Setelah halaman tampil, CSS masih bisa berubah, misalnya lewat JavaScript atau :hover. Browser gak mengulang semuanya: dia menghitung ulang style, lalu mulai lagi dari tahap pertama yang terkena.
| Yang diubah | Tahap yang jalan lagi |
|---|---|
width, height, margin, left |
Layout, Paint, Composite |
color, background, box-shadow |
Paint, Composite |
transform, opacity |
Composite saja |
Layout ulang disebut reflow, dan paling mahal: kalau satu elemen melebar, elemen di sekitarnya ikut dihitung ulang. Paint ulang disebut repaint, lebih murah. Buat animasi transform dan opacity, browser modern memberi elemennya lapisan sendiri, jadi cukup Composite: lapisannya tinggal digeser atau dipudarkan.
Itu jawaban tebakannya: transform lebih ringan. Animasi pakai left menjalankan Layout di setiap frame.
Script yang menahan HTML
Browser yang ketemu <script src="app.js"> biasa langsung berhenti membaca HTML: script di-download dan dijalankan dulu, baru HTML-nya dibaca lagi. Selama itu bagian halaman di bawahnya belum dibangun. CSS di <head> juga menahan, tapi beda: browser belum menggambar apa pun sampai CSS-nya selesai dimuat.
Supaya script gak menahan, pakai defer:
<head>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
defer: script di-download sambil HTML terus dibaca, lalu dijalankan setelah HTML selesai dibaca, sesuai urutan tulisnya.- Menaruh
<script>di akhir<body>hasilnya mirip: HTML di atasnya sudah selesai dibaca duluan. async: juga download sambil jalan, tapi dijalankan begitu selesai di-download, urutannya gak dijamin. Cocok buat script yang berdiri sendiri, misalnya analytics.
⚠️ Jebakan yang sering ketemu
- Animasi pakai
left,top, atauwidth. Tiap frame menjalankan Layout. Pakaitransformbuat menggeser danopacitybuat memudarkan. - Ubah lalu baca ukuran, bergantian di dalam loop. Membaca
offsetHeighttepat setelah mengubah style memaksa Layout saat itu juga, berkali-kali. Baca semua dulu, baru ubah semua. will-changedi mana-mana.will-change: transformmeminta lapisan sendiri buat elemen itu. Tiap lapisan makan memori, jadi pakai cuma di elemen yang memang dianimasikan.
TL;DR: Browser mengubah kode jadi piksel lewat urutan tetap: parse HTML, DOM, CSSOM, render tree, Layout, Paint, Composite. Mengubah ukuran atau posisi menjalankan ulang Layout (reflow, paling mahal), mengubah warna cuma Paint (repaint), dan transform atau opacity cukup Composite, jadi pakai itu buat animasi. Script biasa menahan pembacaan HTML: pakai defer atau taruh di akhir <body>.
