Bagaimana Browser Bekerja

 (howbrowserswork.com)
67 poin oleh GN⁺ 2026-01-06 | 1 komentar | Bagikan ke WhatsApp
  • Panduan pembelajaran interaktif yang dibuat agar web engineer maupun pengguna umum dapat memahami prinsip kerja internal browser secara intuitif
  • Memvisualisasikan proses langkah demi langkah, mulai dari input di address bar hingga pembuatan permintaan HTTP, resolusi DNS, koneksi TCP, parsing HTML, pembentukan DOM, dan pipeline rendering
  • Setiap tahap terdiri dari contoh yang bisa langsung diinput atau dimanipulasi, sehingga proses komunikasi jaringan dan rendering dapat dipelajari secara eksperimental
  • Menunjukkan dengan jelas peran DOM dan perbedaan tahap Layout–Paint–Composite, serta memungkinkan pengguna melihat secara visual faktor-faktor yang memengaruhi performa
  • Materi yang memungkinkan pemahaman konsep inti secara sistematis bagi developer yang ingin mempelajari arsitektur browser atau memahami optimasi performa web

Ikhtisar

  • Panduan ini dibuat untuk orang-orang yang menggunakan web setiap hari tetapi belum memahami dengan jelas cara kerja browser
    • Dibuat untuk melengkapi keterbatasan materi yang ada, yang sering kali terlalu teknis atau terlalu dangkal
    • Dirancang agar detail teknis dapat dipelajari secara intuitif melalui contoh interaktif kecil
  • Detail seperti versi HTTP, SSL/TLS, dan cara kerja DNS secara mendalam tidak dibahas, dan materi disusun ringkas dengan fokus pada konsep inti
  • Proyek ini dirilis sebagai open source, dan perbaikan dapat diusulkan melalui GitHub

Browser dan URL

  • Semua string yang dimasukkan pengguna ke address bar secara internal diubah ke bentuk URL
  • Setelah menekan Enter, tersedia antarmuka praktik untuk melihat langsung proses konversi tersebut

Mengubah URL menjadi permintaan HTTP

  • Browser terlebih dahulu memastikan URL yang tepat untuk dikunjungi, lalu mengirimkan permintaan HTTP ke server
  • Contoh header permintaan adalah sebagai berikut 
    Host: example.com
Accept: text/html
  • Header Host berfungsi sebagai identitas server tujuan pengiriman permintaan

Resolusi alamat server (DNS)

  • Browser tidak dapat langsung menggunakan nama domain seperti example.com
    • Agar dapat berkomunikasi dengan server, nama tersebut harus diubah menjadi alamat IP melalui sistem DNS
  • Saat domain dimasukkan ke kolom input, pengguna dapat melihat hasil resolusi DNS (alamat IP)

Membangun koneksi TCP

  • Setelah mendapatkan IP melalui DNS, browser menggunakan protokol TCP untuk membangun koneksi andal dengan server
  • Koneksi dibentuk melalui proses 3-way handshake
    1. SYN: klien meminta koneksi
    2. SYN-ACK: server merespons dan mengonfirmasi
    3. ACK: klien memberikan konfirmasi akhir
  • TCP menjaga komunikasi tetap stabil melalui jaminan urutan data dan mekanisme retransmisi
  • Pengguna juga dapat menguji kestabilan transmisi dengan memutus jaringan atau memanipulasi paket

Permintaan dan respons HTTP

  • Setelah koneksi TCP terbentuk, browser mengirimkan permintaan HTTP, dan server mengembalikan respons HTTP
  • Pergerakan permintaan dan respons ditampilkan secara visual, sehingga aliran paket dapat diamati
  • Saat respons tiba, browser memisahkan header dan body lalu mulai merender HTML

Parsing HTML dan pembentukan pohon DOM

  • Browser mengirim byte HTML ke parser untuk membentuk pohon DOM
  • Jika HTML contoh dimasukkan, pengguna dapat melihat secara visual proses tag seperti <h1> dan <p> diubah menjadi node DOM
  • Parsing berlangsung secara streaming, sehingga node dapat dibuat bahkan sebelum seluruh dokumen selesai diterima
  • Ketika tag <script> muncul, parsing akan dihentikan sementara untuk menjalankan skrip
  • DOM yang telah selesai kemudian digabungkan dengan CSS untuk membentuk render tree

Pentingnya DOM

  • DOM (Document Object Model) adalah model dokumen di memori browser,
    sekaligus struktur inti yang dibagikan oleh parser HTML, mesin selector CSS, dan runtime JavaScript
  • Perubahan pada DOM langsung tercermin pada layout, style, dan interaksi pengguna
  • Tersedia fitur pratinjau yang memperlihatkan perubahan DOM secara real-time saat kode JavaScript dimodifikasi

Layout, Paint, Composite

  • Setelah DOM dan CSS siap, browser menjalankan pipeline rendering
    • Layout (Reflow): menghitung ukuran dan posisi elemen
    • Paint: mengisi piksel
    • Composite: menggabungkan layer di GPU
  • Perubahan warna hanya menjalankan ulang Paint, tetapi perubahan ukuran akan menjalankan ulang Layout dan Paint sekaligus
  • Pengguna dapat memeriksa melalui klik apakah setiap tahap dijalankan ulang
  • Panduan ini juga menunjukkan secara visual bahwa halaman dengan banyak operasi Layout akan dirender lebih lambat

Ringkasan

  • Sebuah panduan yang memungkinkan pengguna belajar sambil mengalami langsung seluruh proses, dari input alamat hingga rendering
  • Setelah menyelesaikan semua tahap, pengguna dapat membangun model mental yang jelas tentang cara kerja browser
  • Proyek ini bersifat open source, dan perbaikan dapat diusulkan melalui issue atau Pull Request di GitHub

Bacaan terkait

1 komentar

 
GN⁺ 2026-01-06
Komentar Hacker News

  • Tidak semua browser sejak awal memiliki DOM
    Pada awalnya ada WorldWideWeb (Nexus, 1990), Erwise (1992), ViolaWWW (1992), Lynx (1992), NCSA Mosaic (1993), Netscape 1.0 (1994), dan IE 1.0 (1995)
    Lynx hingga kini sengaja tetap menjadi browser non-DOM
    AOL 1.0–2.0 menggunakan mesin statis (AOLPress) tanpa objek yang bisa diprogram
    Kemampuan untuk berinteraksi dengan DOM baru hadir mulai Netscape 2.0 (1995), IE 3.0 (1996), AOL 3.0 (1996), dan Opera 3.0 (1997)
    Setelah itu, Netscape 4.0 (document.layers) dan IE 4.0 (document.all) masing-masing memakai model yang berbeda
    DOM standar pertama adalah W3C DOM Level 1 (1998), yang didukung sebagian oleh IE 5.0 (1999), lalu mulai didukung penuh oleh Konqueror 2.0 (2000) dan Netscape 6.0 (2000)
    Safari 1.0 (2003), Firefox 1.0 (2004), dan Chrome 1.0 (2008) sejak awal mendukung DOM standar, dan saat ini mengikuti WHATWG DOM Living Standard

    • Browser Dillo juga masih memakai arsitektur tanpa DOM
      Karena merender dengan menafsirkan teks HTML secara langsung, penggunaan RAM-nya sangat rendah
    • Rasanya lebih tepat jika disebut sebagai “DOM pada browser modern”

  • Proyek yang keren
    Bagi pembaca HN, High-Performance Browser Networking dan Every Layout layak dibaca bersama
    Keduanya adalah referensi luar biasa yang membahas performa web dan struktur CSS secara mendalam

    • HPBN benar-benar buku yang ditulis dengan sangat baik
      Di bab 4 saya jadi memahami struktur frame TLS, dan itu membantu saya men-debug masalah latensi di tempat kerja sebelumnya
      Bagian tentang trade-off dalam menyesuaikan ukuran frame TLS juga menarik
      Mungkin tidak sering dipakai dalam praktik, tetapi saya jadi tahu bahwa penyetelan detail di level jaringan itu memungkinkan
    • Terima kasih untuk tautan HPBN, materinya sangat menarik

  • Pendekatan yang menarik, terasa seperti mencoba browser.engineering tanpa perlu instalasi
    Saat menampilkan contoh browser dan server, akan lebih mudah dipahami jika ditambahkan ikon visual (misalnya desktop/server)

    • Ada rencana untuk menambahkan lebih banyak bagian dan detail
      Untuk sekarang saya sedang mengumpulkan masukan, dan usulan ikon itu ide bagus yang akan saya pertimbangkan

  • Saya sangat suka dan sudah bookmark
    Namun sayang proses pemuatan resource seperti gambar, stylesheet, dan skrip yang berbasis pada HTML/DOM belum dibahas
    Bagian ini penting untuk memahami kenapa gaya halaman bisa rusak atau gambar bisa hilang

    • Itu sengaja dihilangkan demi menjaga kesederhanaan
      Saya sedang memikirkan cara menambahkan blok-blok itu tanpa membuatnya terlalu rumit

  • Saat jendela browser sempit (di bawah 1170px), ada masalah bagian daftar isi yang tampak menimpa isi utama

    • Sedang diperbaiki

  • Logika parsing URL sepertinya bisa sedikit dipoles lagi
    Kebanyakan pengguna mungkin tidak akan menemui masalah, tetapi browser juga menangani skema protokol selain https:// atau http:// secara khusus
    Rasanya bagus kalau kasus seperti ini juga ditangani
    Referensi: List of URI schemes

  • Proyek yang luar biasa
    Saya penasaran apakah langkah berikutnya ada rencana menambahkan detail proses reflow

  • Sayang sekali lebih dari separuh halaman didedikasikan untuk permintaan jaringan
    Padahal bagian browser yang benar-benar kompleks ada pada pipeline parsing dan rendering

    • Saya berencana membahas bagian mesin rendering dengan lebih rinci
      Karena belum tahu di bagian mana harus masuk lebih dalam, untuk sementara saya rilis dulu lalu mengumpulkan masukan
    • DOM juga bisa dianggap sebagai bagian dari pipeline rendering

  • Mungkin pertanyaan yang agak nyeleneh, tetapi saya penasaran bagaimana kalau lookup DNS dihapus sepenuhnya dan semuanya berjalan hanya dengan nama domain yang bisa dibaca manusia

    • Pikiran yang lebih nyeleneh lagi: bagaimana kalau routing dilakukan dengan alamat Ethernet alih-alih alamat IP
      Konsepnya adalah menjadikan seluruh internet seperti satu switch raksasa
      Saya pernah melihat tulisan pendiri Tailscale yang membahas ide serupa

  • Kerja yang keren