How does a browser work?

Web browser adadlah perangkat lunak yang berfungsi sebagai gerbag utama anda untuk berinteraksi dengan internet. Browser tidak hanya sekedar penampilan halaman, melainkan sistem kompleks yang mengunbah kode mentah dari server menjadi tampilan visual yang interaktif.

Berikut adalah mekanisme kerja browser yang dibagi menjadi tiga bagian utama:

1. Arsitektur Utama Browser

Browser modern terdiri dari beberapa komponen yang bekerja secara bersamaan:

• User Interface (UI): Bagian yang anda lihat, termasuk bilah alamat (address bar), tombol back/forward, dan mesin perender.
• Browser Engine: Bertindak sebagai perantara atau "jenderal" yang mengoodinasikan periintah anatara ui dan mesin perender.
• Rendering Engine: Komponen paling krusial yang menafsirkan HTML dan CSS untuk di tampilkan di layar, Contohnya adalah Blink (Chrome, Edge), Gecko (firefox), dan Webkit (Safari).
• Networking: Mengelola komunikasi internet, seperti mengirim permintaan HTTP dan menerima file dari server.
• JavaScript Interpreter: Mesin khusus (seperti V8 di Chrome) yang menjalankan kode JavaScript agar situs menjadi interaktif.

2. Proses Menampilkan Halaman (Critical Rendering Path)

setelah browser menerima data dari internet, iia melakukan serangkain langkah cepat untuk mengubah kode menjadi piksel di layar anda:

• Membangun DOM (Document Object Model): Browser membaca file HTML dan mengubh struktur teksnya menjadi pohon objek (nodes) yang mewakili isi halaman.
• Membangun CSSOM (CSS Object Model): Browser membaca fie CSS dan membuat struktur gaya yang akan diterapkan padda elemen DOM.
• Membuat Render Tree: Browser menggbungkan DOM dan CSSOM untuk mentukan elemen mana yang benar-benar terlihat (elemen dengan display: none tidak akan masuk ke sini).
• Layout (Reflow): Browser menghitung posisi persis dan ukuran setiap elemen di layar berdasarkan ukuran jendela browser anda.
• Painting: Tahap akhir di mana browser mengisi warna, gambar, dan teks ke dalam piksel-piksel di layar.

3. Cara Browser Menjalankan JavaScript (Envet Loop)

JavaScript bekerja pada jalur tunggal (single-threaded), aritinya ia hanya bisa melakukan satu hal dalam satu waktu. Agar browser tidak "membeku" saat memproses data besar, ia menggunakan makanisme Envent Loop: 

• Call Stack: Tempat dimana funggsi yang sedang dijalankan antre untuk dieksekusi satu persatu.
• Web APIs:: Jika ada tugas berat (serperti mengambil data dari server atau pengatur waktu/timer), browser memindahkannya ke latar belakang agar tidak memblokir antrean utama.
• Callback Queue: Setelah tugas di latar belakang selesai, hasilnya masuk ke antrean tungg. Jika Call Stack sudah kosonng, Envent Loop akan mengambil tugas ddari sini untuk di jalanka.

4. Penyimpanan Data Lokal

Browser memiliki "lemari penyimpanan" sendiri agar situs web bisa mengingat informasi Anda tanpa harus selalu bertanya ke server:

• Cookies: Data kecil (maksimal 4KB) yang sering digunakan untuk status login dan pelacakan.
• LocalStorage: Penyimpanan yang lebih besar (5–10MB) dan tetap tersimpan meskipun browser ditutup.
• SessionStorage: Mirip dengan LocalStorage, namun data akan langsung terhapus saat tab browser ditutup.
• IndexedDB: Basis data lengkap di dalam browser untuk menyimpan data besar atau kompleks secara permanen.