Keajaiban Dalam Hitungan Milidetik
Sebagai *Web Developer*, tugas utamamu adalah membuat website yang cepat. Tapi kamu tidak bisa memperbaiki kecepatan jika kamu tidak tahu proses apa yang terjadi di dalam mesin Google Chrome saat mencerna file HTML, CSS, dan JS milikmu. Proses inti ini disebut Critical Rendering Path (CRP).
Ada 5 tahapan utama yang dilakukan mesin Browser secara berurutan.
1. Membangun DOM (Mencerna HTML)
Browser mulai membaca file Tiba-tiba, di tag Setelah DOM (Kerangka) dan CSSOM (Baju) selesai dibuat, Browser akan "menikahkan" keduanya menjadi satu struktur padu bernama Render Tree. Render tree ini HANYA berisi elemen yang akan terlihat oleh mata (Jika ada elemen Sekarang browser sudah tahu bentuk elemennya, tapi ia belum tahu letaknya di monitor. Pada tahap Layout, mesin akan menghitung secara pasti koordinat ukuran (Lebar layar, tinggi Margin, jarak kotak) dalam hitungan pixel nyata di layar pengguna. Langkah terakhir: Browser mengubah perhitungan matematika tadi menjadi warna pixel sungguhan di layar (Teks warna hitam, *background* merah, dll). Layar komputermu akhirnya menampilkan website yang utuh! Mengapa sangat dilarang menaruh tag .html-mu dari atas ke bawah. Setiap kali menemukan tag seperti , browser mengubahnya menjadi Objek (Node) dan merangkainya menjadi silsilah pohon keluarga yang disebut DOM (Document Object Model) Tree.2. Membangun CSSOM (Mencerna CSS)
, browser melihat *link* ke file style.css. Browser akan menunda proses DOM, men-download file CSS tersebut, lalu merakit pohon versi desain yang disebut CSSOM (CSS Object Model) Tree.3. Menggabungkan Keduanya (Render Tree)
display: none, elemen itu akan dibuang dari pohon ini).4. Menghitung Ukuran (Layout / Reflow)
5. Mengecat Piksel (Paint)
Pelajaran Optimasi untuk Developer