Browser Rendering Pipeline — Web Fundamentals

Memahami bagaimana browser merender halaman akan membantumu menulis kode yang lebih performan. Proses ini disebut Critical Rendering Path. Langkah-langkah rende

Memahami bagaimana browser merender halaman akan membantumu menulis kode yang lebih performan. Proses ini disebut Critical Rendering Path.

Langkah-langkah rendering:

HTML → DOM Tree → CSSOM → Render Tree → Layout → Paint → Composite

1. Parsing HTML → DOM Tree Browser membaca HTML dari atas ke bawah dan membangun DOM (Document Object Model) — representasi tree dari struktur halaman.

<html>
  <body>
    <h1>Halo</h1>
    <p>Dunia</p>
  </body>
</html>

Menjadi tree: html → body → h1 + p

2. Parsing CSS → CSSOM Semua CSS (inline, internal, external) diparsing menjadi CSSOM (CSS Object Model) — tree yang berisi style setiap elemen.

3. Render Tree DOM + CSSOM digabung menjadi Render Tree — hanya elemen yang visible yang masuk. Elemen dengan display: none tidak disertakan.

4. Layout (Reflow) Browser menghitung posisi dan ukuran setiap elemen berdasarkan viewport dan style. Proses ini mahal secara komputasi.

5. Paint Browser menggambar piksel sebenarnya ke layar — warna, teks, gambar, border, shadow, dll.

6. Composite Lapisan (layers) yang sudah di-paint digabungkan. GPU membantu proses ini untuk elemen dengan transform, opacity, atau will-change.

Render-blocking resources:

<!-- CSS memblokir rendering! -->
<link rel="stylesheet" href="styles.css">

<!-- JS memblokir parsing HTML! -->
<script src="app.js"></script>

<!-- Solusi: async/defer -->
<script async src="analytics.js"></script>  <!-- download parallel, eksekusi setelah siap -->
<script defer src="app.js"></script>         <!-- download parallel, eksekusi setelah DOM ready -->

Reflow vs Repaint:

Tips optimasi: