Arsitektur Web Browser
Pengantar
Web browser adalah salah satu alat paling penting dalam dunia digital. Di balik tampilannya yang sederhana, terdapat arsitektur kompleks yang memungkinkan halaman web ditampilkan dengan cepat, aman, dan efisien. Pemahaman tentang cara kerja CPU, GPU, proses, thread, dan komunikasi antar komponen sangat penting untuk memahami bagaimana browser bekerja.
1. CPU vs GPU
Central Processing Unit (CPU)
- Disebut sebagai otak komputer.
- Menjalankan instruksi dan proses secara urut.
- Cocok untuk tugas umum seperti menjalankan sistem operasi, database, dan aplikasi.
- Memiliki sedikit inti (core) tetapi mampu menyelesaikan tugas kompleks dengan cepat.
Graphics Processing Unit (GPU)
- Terdiri dari ribuan inti kecil yang bisa menangani banyak tugas sederhana secara bersamaan.
- Awalnya dikembangkan untuk render grafik.
- Sekarang digunakan untuk komputasi paralel, seperti mining kripto, AI, dan deep learning.
💡 Analogi:
- CPU = Pegawai administrasi yang menyelesaikan banyak jenis pekerjaan satu per satu.
- GPU = Tim teknisi yang melakukan banyak tugas sederhana secara bersamaan.
2. Proses dan Thread
Proses
- Sebuah program yang sedang dijalankan.
- Memiliki alokasi memori sendiri.
- Jika proses berakhir, semua sumber daya dialokasikan ulang oleh sistem operasi.
Thread
- Bagian dari proses.
- Bisa berjalan secara paralel dalam satu proses.
- Membagi sumber daya dengan thread lain dalam proses yang sama.
💡 Analogi:
- Proses = Kotak tertutup dengan ruang kerja sendiri.
- Thread = Ikan yang berenang di dalam kotak tersebut.
3. Inter Process Communication (IPC)
Apa Itu IPC?
Komunikasi antara dua atau lebih proses untuk bertukar data atau menyelaraskan tindakan mereka.
Mengapa Penting?
- Memungkinkan aplikasi besar dibagi menjadi beberapa proses.
- Jika satu proses crash, tidak memengaruhi seluruh aplikasi.
💡 Contoh: Saat kamu buka Chrome, setiap tab bisa jadi proses berbeda agar jika satu tab crash, tab lain tetap hidup.
4. Arsitektur Web Browser
Komponen Utama
| Komponen | Fungsi |
|---|---|
| UI Thread | Mengatur antarmuka pengguna seperti address bar, tombol bookmark, dll. |
| Network Thread | Mengelola permintaan jaringan seperti HTTP request, DNS lookup, dan TLS handshake. |
| Renderer Process | Merender konten HTML, CSS, JavaScript menjadi halaman web yang terlihat. |
| GPU Process | Mengelola rendering visual dan akselerasi grafis. |
| Plugin Process | Menjalankan plugin seperti Flash, PDF viewer, dll. |
5. Studi Kasus: Arsitektur Google Chrome
Chrome menggunakan arsitektur multi-proses:
- Satu proses untuk UI browser.
- Setiap tab memiliki renderer process sendiri.
- Network thread bekerja secara independen.
- GPU process dikelola terpisah untuk performa visual.
Keuntungan
✅ Stabilitas tinggi – tab yang crash tidak memengaruhi tab lain
✅ Performa optimal – distribusi tugas yang efisien
✅ Keamanan – setiap proses diisolasi
6. Tahapan Saat Membuka Website
Input di Address Bar
- UI Thread menganalisis apakah input adalah URL atau pencarian.
Permintaan Jaringan
- Network Thread mencari IP server melalui DNS.
- Membuat koneksi TLS untuk keamanan.
- Mendapatkan respons HTTP dari server.
Cek Tipe Data
- Jika HTML → dikirim ke Renderer Process.
- Jika ZIP → dikirim ke Download Manager.
Cek Keamanan
- Network Thread memeriksa apakah situs aman.
- Dilakukan juga proteksi seperti Cross-Origin Read Blocking (CORB).
Render Halaman
- Renderer Process membangun DOM, CSSOM, layout tree, dan akhirnya menampilkan halaman web.
7. Konsep Dasar Keamanan pada Browser
| Teknik | Penjelasan |
|---|---|
| Sandboxing | Proses renderer diisolasi sehingga tidak bisa mengakses sistem langsung. |
| Site Isolation | Setiap domain dijalankan dalam proses yang berbeda. |
| Same-Origin Policy | Pembatasan akses antar situs yang berbeda domain. |
| Content Security Policy (CSP) | Aturan keamanan untuk mencegah eksekusi script berbahaya. |
| HTTPS & TLS | Enkripsi data antara browser dan server. |
8. Ringkasan Kerja Browser
User Input (URL)
→ UI Thread → Network Thread → Cek Header & Keamanan
→ Kirim ke Renderer Process → Render Halaman
→ Update Address Bar & History9. Kesimpulan
Pemahaman akan arsitektur web browser membantu kita: 🔹 Memahami bagaimana halaman web dimuat
🔹 Meningkatkan performa dan keamanan aplikasi web
🔹 Menyusun strategi debugging dan optimasi aplikasi
Dengan arsitektur modern seperti multi-proses dan sandboxing, browser saat ini lebih stabil, cepat, dan aman dibandingkan generasi sebelumnya.