Kamu mengetik sebuah alamat, menekan Enter, dan dalam hitungan detik halaman lengkap muncul: teks, gambar, tombol, warna, semuanya. Terasa instan dan tanpa usaha. Padahal di balik momen singkat itu, browser menjalankan rangkaian langkah yang ternyata cukup panjang untuk mengubah sekumpulan berkas teks menjadi gambar yang kamu lihat di layar.
Artikel ini memberi kamu gambaran besar dari rangkaian itu, dari ujung ke ujung. Di sini kita tidak akan menyelam dalam ke satu tahap pun. Tujuannya adalah menyebut setiap bagian, menjelaskan fungsinya dengan bahasa sederhana, dan menunjukkan bagaimana semua bagian itu saling terhubung. Begitu kamu bisa melihat seluruh alurnya, artikel-artikel lanjutan yang lebih mendalam akan jauh lebih mudah dipahami.
Browser itu sebenarnya apa
Akan membantu kalau kita mulai dari arti kata “browser” itu sendiri. Browser web adalah program yang tugasnya mengambil dokumen dari internet dan menampilkannya kepada kamu. Chrome, Firefox, Safari, dan Edge semuanya browser. Di balik layar, rancangan besarnya mirip, meski detailnya berbeda-beda.
Browser bukan satu potong perangkat lunak tunggal. Ia adalah kumpulan bagian yang bekerja sama, masing-masing dengan tugasnya sendiri:
- Bagian jaringan yang mengunduh berkas lewat internet.
- Rendering engine yang mengubah berkas tadi menjadi halaman visual.
- Mesin JavaScript yang menjalankan kode di halaman.
- Antarmuka pengguna untuk kolom alamat, tab, dan tombol di sekeliling halaman.
Bagian yang menarik buat pembahasan kita ada di rendering engine dan mesin JavaScript. Semua penjelasan di bawah pada dasarnya soal bagaimana keduanya mengubah berkas mentah menjadi piksel.
Perjalanannya, tahap demi tahap
Saat kamu membuka sebuah halaman, pekerjaannya mengalir lewat beberapa tahap, kurang lebih berurutan. Setiap tahap mengambil hasil dari tahap sebelumnya lalu mengubahnya sedikit lebih jauh. Berikut seluruh alurnya dalam satu diagram:
Kamu ketik URL
│
▼
┌──────────────┐
│ JARINGAN │ ambil HTML, CSS, JS, gambar lewat internet
└──────┬───────┘
▼
┌──────────────┐
│ PARSING │ HTML → pohon DOM | CSS → pohon CSSOM
└──────┬───────┘
▼
┌──────────────┐
│ RENDER TREE │ gabung DOM + CSSOM (hanya yang terlihat)
└──────┬───────┘
▼
┌──────────────┐
│ LAYOUT │ hitung ukuran + posisi tiap kotak
└──────┬───────┘
▼
┌──────────────┐
│ PAINT │ isi piksel: teks, warna, garis tepi, gambar
└──────┬───────┘
▼
┌──────────────┐
│ COMPOSITE │ tumpuk lapisan jadi satu → layar akhir
└──────────────┘
(mesin JavaScript jalan berdampingan & bisa mengubah tahap mana pun)Mari kita telusuri tiap kotaknya.
Tahap 1: Jaringan, mengambil bahan mentah
Sebelum browser bisa menampilkan apa pun, ia butuh berkas-berkas yang menyusun halaman. Itu dimulai dari dokumen HTML utama, dan HTML biasanya menunjuk ke berkas lain yang ia butuhkan: stylesheet, skrip, gambar, font, dan seterusnya.
Tahap jaringan mengurus semua ini. Browser mencari tahu server mana yang menyimpan berkas, membuka koneksi, meminta berkasnya, lalu mengunduh balasannya. Di sinilah hal seperti pencarian DNS (mengubah nama seperti blog.acy-partner.com menjadi alamat berupa angka) dan pertukaran permintaan dan balasan terjadi.
GET /index.html HTTP/1.1
Host: blog.acy-partner.comServer membalas dengan HTML, dan browser langsung mulai membacanya, bahkan sebelum seluruh berkas tiba. Sambil membaca, ia menemukan rujukan ke berkas lain dan mulai mengunduhnya secara paralel. Jaringan sering jadi bagian paling lambat dari keseluruhan proses, semata-mata karena bergantung pada kecepatan internet antara kamu dan server.
HTML datang sebagai teks biasa
Berkas yang dikirim server hanyalah teks. Belum ada halaman visual di dalamnya, hanya deskripsi sebuah halaman yang ditulis dalam HTML. Mengubah deskripsi itu menjadi sesuatu yang bisa kamu lihat adalah tugas semua tahap berikutnya.
Tahap 2: Parsing, dari teks menjadi pohon terstruktur
Begitu byte mulai berdatangan, browser harus memahaminya. HTML dan CSS mentah hanyalah deretan karakter; browser perlu mengubahnya menjadi struktur data tertata yang bisa ia olah. Proses pengubahan ini disebut parsing.
Ada dua proses parsing di sini, yang menghasilkan dua pohon.
HTML menjadi DOM
Browser membaca HTML lalu membangun DOM, singkatan dari Document Object Model. DOM adalah pohon berisi objek, satu untuk tiap elemen, bersarang persis seperti tag-tag kamu bersarang. Halaman seperti ini:
<body>
<h1>Selamat datang</h1>
<p>Halo</p>
</body>menjadi pohon di mana body adalah induk, dan h1 serta p adalah anaknya. DOM adalah model hidup browser tentang struktur dan isi halaman. Nantinya JavaScript membaca dan mengubah halaman dengan cara berkomunikasi dengan pohon ini.
CSS menjadi CSSOM
Secara paralel, browser mem-parsing setiap stylesheet menjadi CSSOM, yaitu CSS Object Model. Seperti DOM, ini juga pohon, tapi isinya menjelaskan aturan gaya: warna, font, ukuran, dan jarak apa yang berlaku untuk elemen mana. CSSOM juga menentukan aturan mana yang menang ketika beberapa aturan menyasar elemen yang sama.
| Berkas sumber | Diparsing menjadi | Menjelaskan |
|---|---|---|
| HTML | DOM | struktur dan isi halaman |
| CSS | CSSOM | bagaimana tiap elemen seharusnya tampil |
Di akhir tahap ini, browser sudah tahu apa yang ada di halaman (DOM) dan bagaimana tampilannya (CSSOM), tapi belum menggabungkan keduanya.
Tahap 3: Render tree, menentukan apa yang terlihat
Berikutnya browser menyatukan DOM dan CSSOM menjadi satu struktur bernama render tree. Pohon ini hanya berisi hal-hal yang benar-benar akan digambar, lengkap dengan gaya yang seharusnya dimiliki masing-masing.
Kenapa perlu pohon terpisah? Karena tidak semua isi DOM muncul di layar. Elemen yang disembunyikan dengan display: none, misalnya, tetap bagian dari DOM tapi tidak menyumbang apa pun secara visual, jadi tidak dimasukkan ke render tree. Bagian <head> dokumen juga ada di DOM, tapi tidak pernah kamu lihat, jadi ikut dilewati.
Jadi render tree pada dasarnya adalah jawaban atas satu pertanyaan: dari semua isi dokumen, apa yang benar-benar akan dilihat pengguna, dan dengan gaya seperti apa?
Tahap 4: Layout, menghitung posisi dan ukuran
Render tree sudah tahu elemen mana yang terlihat dan bagaimana gayanya, tapi belum tahu di mana letaknya atau seberapa besar ukurannya. Tahap layout yang menghitung itu.
Selama layout (kadang disebut “reflow”), browser menghitung posisi dan dimensi persis dari setiap kotak di halaman. Ia menentukan seberapa lebar layar, bagaimana teks membungkus ke baris berikutnya, berapa banyak ruang yang dipakai tiap elemen, dan di mana letak masing-masing relatif terhadap yang lain. Hasilnya adalah peta geometri yang presisi: paragraf ini mulai di koordinat sekian dan setinggi sekian piksel, gambar ini ada di sini, dan seterusnya.
Kenapa layout bisa berat
Layout bergantung pada hubungan antar elemen. Mengubah ukuran satu elemen bisa menggeser semua yang ada di sekitarnya, memaksa browser menghitung ulang posisinya. Itulah kenapa perubahan layout yang sering dan menyeluruh bisa membuat halaman terasa berat.
Tahap 5: Paint, mengubah kotak menjadi piksel
Sekarang browser sudah tahu apa yang harus digambar dan persis di mana. Tahap paint mengisi piksel yang sebenarnya: ia menggambar teks, warna, latar, garis tepi, bayangan, dan gambar ke dalam lapisan di memori. Bayangkan layout sebagai menggambar cetak biru, dan paint sebagai mewarnainya.
Paint belum langsung menaruh apa pun di layarmu. Ia menghasilkan konten visual, sering kali dipecah menjadi beberapa lapisan terpisah, siap untuk dirakit.
Tahap 6: Compositing, merakit gambar akhir
Tahap terakhir adalah compositing. Browser mengambil lapisan-lapisan yang sudah dipaint lalu menumpuknya dalam urutan yang benar untuk menghasilkan gambar akhir yang kamu lihat, kemudian menyerahkannya ke layar.
Memecah halaman menjadi lapisan adalah trik optimasi yang cerdas. Kalau hanya satu lapisan yang berubah, misalnya sebuah elemen yang bergeser melintasi layar, browser sering kali cukup memindahkan lapisan itu saja alih-alih mengecat ulang semuanya. Inilah salah satu alasan animasi yang mulus bisa terjadi.
Setelah compositing, halaman akhirnya terlihat. Seluruh rangkaian, dari jaringan sampai compositing, itulah yang browser lakukan untuk paint pertama dari halaman mana pun yang kamu buka.
Mesin JavaScript, bagian yang bisa mengubah segalanya
Masih ada satu pemain besar lagi: mesin JavaScript. Ini adalah komponen yang menjalankan kode JavaScript di sebuah halaman (di Chrome namanya V8, di Firefox SpiderMonkey).
JavaScript penting di sini karena ia bisa masuk ke dalam alur tadi dan mengubah banyak hal setelahnya. Sebuah skrip bisa menambah elemen baru ke DOM, mengubah gaya sebuah elemen, atau menghapus sesuatu sepenuhnya. Ketika itu terjadi, browser mungkin perlu mengulang layout, paint, dan compositing untuk bagian yang terdampak. Begitulah halaman interaktif bekerja: kamu mengklik tombol, JavaScript memperbarui DOM, lalu browser menjalankan ulang tahap-tahap berikutnya untuk mencerminkan perubahan itu.
// JavaScript masuk ke DOM untuk mengubah halaman
document.querySelector("h1").textContent = "Diperbarui!";Satu baris itu memberi tahu browser bahwa halaman berubah, yang bisa merembet kembali ke layout dan paint sampai kamu melihat teks baru.
JavaScript bisa menghentikan parsing
Secara bawaan, ketika parser HTML menemui sebuah skrip, ia bisa berhenti sejenak dan menjalankan skrip itu sebelum lanjut, karena skripnya mungkin mengubah dokumen. Inilah salah satu alasan kenapa di mana dan bagaimana kamu memuat skrip berpengaruh nyata terhadap seberapa cepat halaman muncul.
Merangkai semuanya
Berikut keseluruhan ceritanya dalam satu kalimat: browser mengunduh berkas, mem-parsing HTML menjadi DOM dan CSS menjadi CSSOM, menggabungkan keduanya menjadi render tree, menata letak (layout) semua bagian, mengecat (paint) pikselnya, lalu merakit (composite) lapisan menjadi gambar akhir, sementara mesin JavaScript bisa ikut campur kapan saja untuk mengubah halaman.
Beberapa gagasan yang layak kamu bawa pulang:
- Tahap-tahapnya berjalan kurang lebih berurutan, masing-masing memberi makan tahap berikutnya, tapi browser pintar menumpangtindihkan pekerjaan dan memulai unduhan lebih awal.
- DOM dan CSSOM adalah dua fondasi yang menjadi dasar semua hal visual.
- Perubahan setelah halaman dimuat, terutama dari JavaScript, bisa mengirim browser kembali melewati layout, paint, dan composite.
Gambaran ini sengaja dibuat tidak mendalam, supaya kamu bisa melihat bentuk keseluruhannya dulu. Dari sini, langkah berikutnya yang wajar adalah menengok lebih dekat bagaimana tahap-tahap rendering itu saling bertaut, dan bagaimana browser memprioritaskan pekerjaan agar bisa menampilkan sesuatu yang berguna secepat mungkin. Pembahasan yang lebih mendalam itu akan langsung dibangun di atas alur yang baru saja kamu telusuri.
