Sepanjang course ini kita menulis HTML dan mengamati hasilnya di layar, tetapi kita belum pernah menelusuri apa yang terjadi di tengah jalan. Padahal, detik-detik setelah dokumen tiba di browser itulah banyak perilaku penting ditentukan: kapan halaman mulai tergambar dan apa yang menahan proses. Chapter ini menyusuri pipeline pemrosesan HTML, yaitu rangkaian tahap yang mengubah file teks menjadi halaman yang tampil. Pemahaman ini menjadi fondasi bagi dua chapter berikutnya yang menelaah hasil akhir pipeline tersebut, yaitu DOM.

Pipeline: dari Byte hingga DOM #

Browser menerima dokumen HTML sebagai deretan byte — dari jaringan, disk, maupun cache. Deretan byte tersebut melewati empat tahap utama sebelum menjadi halaman yang terlihat:

  1. Byte menjadi karakter: browser menentukan pengodean teks (misalnya utf-8 dari <meta charset>), lalu menerjemahkan setiap byte menjadi karakter.
  2. Karakter menjadi token: tokenizer membaca karakter secara berurutan dan mengelompokkannya menjadi token, misalnya token start tag <p>, token teks, dan token end tag </p>.
  3. Token menjadi node: setiap token dikonversi menjadi node, yaitu objek untuk setiap element, teks, dan dokumen itu sendiri.
  4. Node menjadi DOM: node-node dirangkai sesuai aturan nested hingga membentuk pohon dokumen (DOM) yang siap diperlakukan CSS dan JavaScript.

Alur tersebut dapat digambarkan sebagai berikut:

Diagram di atas memperlihatkan alur yang berurutan dari byte hingga DOM. Setelah DOM siap, browser menggabungkannya dengan hasil olah CSS menjadi render tree — pohon tampilan yang memuat bagian-bagian yang tampak — lalu menghitung posisi setiap kotak dan menggambarnya ke layar. Setiap tahap baru boleh dimulai setelah tahap sebelumnya memberikan hasil.

Parsing Incremental #

Proses di atas tidak menunggu file utuh. Parser HTML bekerja secara incremental: tokenisasi dimulai begitu byte pertama tiba, sehingga browser dapat merender bagian atas halaman sementara bagian bawahnya masih dalam perjalanan. Bagi pengunjung dengan koneksi lambat, perilaku ini terasa seperti halaman yang terisi bertahap, bukan layar kosong yang mendadak penuh.

Sementara parser sibuk membaca dokumen dari awal, komponen lain bernama preload scanner menyapu bagian dokumen yang telah tiba dan mencari sumber daya penting: CSS, script, dan font. Permintaan sumber daya tersebut diajukan lebih awal, sehingga pengunduhan berjalan paralel dengan parsing.

Sumber Daya yang Menahan Proses #

Tidak semua sumber daya lewat tanpa efek. CSS eksternal menahan perenderan: render tree baru dapat dibentuk setelah CSS selesai diunduh dan diolah, karena tanpa style browser belum tahu bagaimana setiap kotak harus tampil. Script klasik dengan atribut src lebih berat dampaknya: parser berhenti sampai script terunduh dan dieksekusi.

Karena itu, pada chapter Script dan Defer kita memakai defer agar script mengunduh secara paralel tanpa menahan parsing. Prinsipnya sama di sini: tempatkan sumber daya dengan sengaja, dan pahami sumber daya mana yang memang layak menahan proses.

Contoh: Satu Dokumen Melalui Pipeline #

File berikut adalah halaman catatan belajar yang sengaja dibuat sederhana. Simpan sebagai contoh-parsing.html, buka dengan browser, lalu bayangkan tahap-tahap pipeline berjalan pada file ini:

html contoh-parsing.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Belajar HTML</title>
</head>
<body>
  <h1>Catatan Belajar</h1>
  <p>Sesi belajar hari ini membahas pipeline pemrosesan HTML.</p>
  <ul>
    <li>Byte menjadi karakter</li>
    <li>Karakter menjadi token</li>
    <li>Token menjadi node</li>
  </ul>
  <p><a href="lanjutan.html">Baca catatan lanjutan</a> bila waktu tersisa.</p>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Heading "Catatan Belajar" di bagian atas halaman
  - Satu paragraf pengantar di bawahnya
  - Daftar berisi tiga butir tahap pipeline
  - Tautan "Baca catatan lanjutan" pada bagian bawah

Berikut peran setiap bagian file tersebut dalam pipeline:

  1. Baris 1-2 (<!doctype html> dan <html lang="id">): token pertama yang dibaca parser; doctype memilih mode standar sehingga seluruh tahap berikutnya mengikuti aturan HTML modern.
  2. Baris 4-5 (<meta>): tahap byte-ke-karakter memakai utf-8 yang dinyatakan pada baris 4; tanpa baris ini browser menebak pengodean dan karakter non-ASCII berisiko tampil salah.
  3. Baris 6 (<title>): teks di antara kedua tag menjadi node teks anak element title, lalu ditampilkan pada tab browser.
  4. Baris 9-15 (heading, paragraf, daftar): setiap tag pembuka menghasilkan node element dan setiap teks menghasilkan node teks; karena parsing incremental, bagian ini mulai tergambar tanpa menunggu baris terakhir file.
  5. Baris 16 (<a href="lanjutan.html">): parser membentuk node anchor; nilai atribut href tersimpan pada objek node tersebut, bukan sebagai node anak tersendiri — detail yang kita bedah pada chapter berikutnya.

Pipeline ini berakhir pada satu hasil: DOM. Chapter berikutnya berhenti di titik itu untuk mengenali DOM lebih dekat — bentuknya sebagai pohon objek dan alasan DOM tidak selalu identik dengan markup yang kita tulis.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-parsing.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Belajar HTML</title>
</head>
<body>
  <h1>Catatan Belajar</h1>
  <p>Sesi belajar hari ini membahas pipeline pemrosesan HTML.</p>
  <ul>
    <li>Byte menjadi karakter</li>
    <li>Karakter menjadi token</li>
    <li>Token menjadi node</li>
  </ul>
  <p><a href="lanjutan.html">Baca catatan lanjutan</a> bila waktu tersisa.</p>
</body>
</html>