CSS Rendering Overview

Ketika sebuah halaman dibuka, CSS tidak langsung menjadi tampilan: browser menjalankan serangkaian tahap yang berurutan sebelum piksel pertama muncul di layar. Memahami alur tersebut penting karena setiap optimasi performa pada Section ini menunjuk ke salah satu tahapnya — mempercepat pemuatan stylesheet, mengurangi pekerjaan style, menahan ukuran layout, atau mengurangi area yang digambar ulang. Chapter ini memetakan alur dari file CSS hingga layar, lalu menjelaskan mengapa CSS di <head> sifatnya render-blocking. Setelah peta ini utuh, chapter-chapter berikutnya akan terasa seperti turunan yang wajar.

Dari Teks CSS Menjadi CSSOM #

Tahap pertama berlangsung jauh sebelum ada tampilan. Browser mengunduh file CSS, lalu mem-parsing teks tersebut aturan demi aturan: selector diuraikan, deklarasi divalidasi, dan hasilnya disusun menjadi pohon bernama CSSOM (CSS Object Model) — padanan CSS untuk DOM. Aturan yang tidak valid dilewati tanpa menghentikan parsing sisanya, sehingga satu kesalahan kecil tidak merusak seluruh stylesheet.

Pada tahap style, browser mencocokkan setiap elemen DOM dengan aturan CSSOM, menjalankan cascade dan inheritance, lalu menghasilkan computed style untuk setiap elemen — nilai akhir yang kita baca di panel Computed DevTools. Pekerjaan ini terjadi untuk seluruh dokumen sebelum layout pertama, dan diulang setiap kali ada perubahan yang memengaruhi pencocokan selector.

Alur lengkapnya dapat digambarkan seperti ini:

flowchart LR A[Unduh CSS] --> B[Parse CSS] B --> C[CSSOM] D[Parse HTML] --> E[DOM] C --> F[Style: cocokkan aturan] E --> F F --> G[Layout: hitung geometri] G --> H[Paint: isi piksel] H --> I[Composite: susun lapisan]

Diagram di atas membaca: DOM dan CSSOM dibangun terpisah, bertemu pada tahap style, lalu melewati layout, paint, dan composite secara berurutan. Tiga tahap terakhir inilah yang menjadi objek pengukuran pada Chapter Measuring CSS Performance .

Style, Layout, Paint, Composite #

Empat tahap terakhir menentukan seberapa mahal sebuah perubahan CSS. Browser menghitung style untuk semua elemen, lalu pada tahap layout menghitung posisi dan ukuran setiap kotak. Tahap paint mengisi piksel — teks, warna, bayangan — dan composite menyusun lapisan-lapisan yang telah digambar menjadi satu frame di layar.

Aturan praktisnya: perubahan properti geometri seperti width atau margin memicu ketiga tahap sekaligus, perubahan warna cukup berhenti di paint, sedangkan transform dan opacity sering cukup berhenti di composite. Rincian murah-mahalnya telah kita bahas pada Chapter Animation Performance ; yang perlu ditambahkan di sini, pekerjaan tahap style juga dapat dipangkas dengan selector yang sederhana dan jumlah aturan yang sedikit — salah satu alasan mengapa CSS yang tidak terpakai patut dibersihkan pada Chapter berikutnya.

Demo chapter ini memuat unsur-unsur yang telah kita pelajari: judul, kartu, baris fleksibel, dan badge. Nilai computed pada unsur-unsur tersebut merupakan hasil akhir dari seluruh alur di atas.

css
alur-render.html (cuplikan)
.judul {
  color: rgb(15, 118, 110);
  font-size: 28px;
}
.kartu {
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
}
.baris {
  display: flex;
  gap: 12px;
}
.badge {
  display: inline-block;
  background-color: rgb(2, 132, 199);
}

Mari kita telaah hubungannya dengan tahap render:

.judul dan .kartu: warna dan sudut melengkung adalah pekerjaan tahap paint — browser mengisi piksel pada area yang relevan saja.
.baris dengan display: flex dan gap: layout menghitung posisi kedua anak berdampingan; perubahan ukuran salah satu anak memicu layout ulang.
.badge dengan display: inline-block: perubahan display mengubah jenis kotak, sehingga memicu layout — properti yang paling sering diulang saat development.

Hasil di Browser:

text
Judul tampil berwarna teal dengan ukuran 28px. Kartu berlatar putih
dengan sudut membulat 8px. Baris kartu tersusun berdampingan dengan
jarak 12px (display: flex, gap: 12px). Badge berwarna biru rgb(2, 132,
199) dan tampil inline-block di samping teks.

Mengapa CSS Bersifat Render-Blocking #

Browser menahan render halaman sampai CSS di <head> selesai diunduh dan di-parse — sifat ini disebut render-blocking . Alasannya menjaga pengalaman membaca: tanpa menahan, pengguna sempat melihat halaman tanpa gaya (flash of unstyled content) sebelum gaya tiba, lalu seluruh halaman “melompat” ketika CSS diterapkan.

Konsekuensinya, stylesheet yang besar dan lambat menunda piksel pertama secara langsung. Strategi mengatasinya — meminimalkan ukuran, memecah per media, dan memuat yang tidak kritis secara asinkron — kita bahas tuntas pada Chapter Stylesheet Loading . Untuk sekarang, pegang satu kalimat kunci: setiap byte CSS yang diunduh di awal adalah pekerjaan parsing yang harus selesai sebelum halaman boleh tampil.