Belajar Frontend - Cara Kerja Web (Browser & HTTP)
Memahami perjalanan sebuah halaman dari URL sampai pixel di layar: DNS dan hosting, protokol HTTP/HTTPS dengan status code, serta cara browser membangun DOM, CSSOM, layout, dan paint — lalu praktik menginspeksi semuanya langsung di DevTools
#Pendahuluan
Setelah di episode 1 kita memahami peran dan tanggung jawab frontend developer, pada episode ini kita membedah apa yang sebenarnya terjadi di balik layar saat kalian mengetik URL dan menekan Enter. Dari ketik URL hingga pixel muncul di layar, ada puluhan langkah yang berjalan dalam hitungan milidetik — dan frontend developer yang baik tahu di mana letak setiap kaitannya dengan kode yang ia tulis.
Mengapa ini penting? Karena hampir semua masalah yang kalian temui di produksi — halaman lambat, gambar tidak muncul, request gagal, cache basi — berakar dari pemahaman lapisan ini. Episode 12 (performa) dan episode 20 (edge) akan membangun langsung di atas fondasi ini.
#Perjalanan Sebuah Request
Saat kalian mengetik https://toko.kita/ dan menekan Enter:
- DNS — browser menanyakan alamat IP dari nama domain ke resolver DNS.
- TCP + TLS — koneksi aman dibuat; HTTPS menjamin data terenkripsi.
- HTTP Request — browser mengirim request
GET /ke server. - Response — server mengembalikan HTML (plus CSS, JS, gambar yang dirujuk).
- Render — browser mengurai dan menggambar halaman.
#HTTP dan HTTPS
HTTP adalah protokol percakapan antara browser (klien) dan server. Setiap percakapan punya request (permintaan) dan response (jawaban).
#Metode HTTP
GET → ambil data (baca halaman, ambil JSON)
POST → kirim data baru (buat pesanan)
PUT → perbarui data (ubah profil)
PATCH → perbarui sebagian data
DELETE → hapus data#Status Code
Status code adalah "kode nada" jawaban server — kalian akan sering bertemu saat debugging:
| Kode | Kelas | Contoh |
|---|---|---|
| 200 | Sukses | 200 OK, 201 Created |
| 3xx | Redirect | 301 Moved Permanently, 304 Not Modified |
| 4xx | Error klien | 404 Not Found, 401 Unauthorized, 403 Forbidden |
| 5xx | Error server | 500 Internal Server Error, 503 Service Unavailable |
#Headers yang Sering Kalian Lihat
content-type: text/html; charset=utf-8
cache-control: public, max-age=3600
set-cookie: session=abc123Di episode 18 kita akan membahas header keamanan seperti CSP, dan di episode 12 header cache-control untuk performa.
Note
HTTPS wajib untuk aplikasi produksi apa pun: selain enkripsi, browser memberlakukan pembatasan (seperti tidak mengizinkan fitur tertentu di halaman non-HTTPS). Jangan pernah memakai HTTP di produksi — episode 18 membahas detail keamanannya.
#Cara Browser Merender Halaman
Setelah HTML dan CSS diterima, browser membangun halaman lewat beberapa tahap:
- Parsing HTML → DOM — HTML diubah menjadi pohon objek bernama DOM (Document Object Model).
- Parsing CSS → CSSOM — CSS diubah menjadi pohon CSSOM (CSS Object Model).
- Render Tree — DOM dan CSSOM digabung menjadi apa yang layak digambar.
- Layout — browser menghitung posisi dan ukuran setiap elemen.
- Paint — browser menggambar pixel; lalu Composite menggabungkan layer.
Dua hal yang paling sering mempengaruhi performa: Layout (banyak disebut reflow) dan Paint (banyak disebut repaint). Mengubah width memicu layout ulang; mengubah color hanya memicu paint. Episode 16 (animasi) dan 12 (performa) akan kembali ke istilah ini.
#JavaScript dan Render Blocking
JavaScript berjalan di main thread yang sama dengan layout dan paint. Script besar yang berada di <head> memblokir render:
<script src="app.js"></script> <!-- blocking: render menunggu -->
<script async src="app.js"></script> <!-- tidak memblokir -->
<script defer src="app.js"></script> <!-- dijalankan setelah parse -->Jadi urutan dan penempatan script sangat menentukan seberapa cepat halaman "terlihat". Kita akan mengoptimalkannya di episode 12.
#Cache dan Hosting
Cache menyimpan salinan resource agar request berikutnya tidak mengulang unduhan penuh. Ada beberapa lapis:
- Browser cache — dikendalikan header
cache-control. - CDN cache — server terdekat dengan pengguna menyimpan salinan halaman/assets.
- Service worker cache — cache aplikatif untuk mode offline (episode 22).
Hosting adalah tempat file kalian "tinggal" agar bisa diakses publik: VPS, shared hosting, atau platform seperti Vercel/Netlify/Cloudflare Pages. Platform modern biasanya sekaligus menyediakan CDN dan HTTPS otomatis — kita bahas deployment di episode 9 dan 20.
#Praktik: Inspeksi di DevTools
Buka TokoKita (atau situs mana pun), buka DevTools, dan lakukan:
- Panel Network → reload halaman. Amati daftar request: status code, ukuran, dan waktu.
- Klik satu request HTML → tab Headers. Perhatikan method, status, dan
cache-control. - Panel Elements → klik elemen, lihat DOM di panel itu, dan kotak box model di panel samping.
- Panel Performance → rekam reload, lalu lihat bagian Layout & Paint di timeline.
curl -I https://toko.kita/Outputnya menunjukkan HTTP/2 200, cache-control, dan header lain — ringkasan cepat tanpa membuka browser.
Tip
Panel Network adalah alat pertama saat debugging apa pun yang berhubungan dengan data: gambar tidak muncul (cek status 404), data lama (cek header cache), atau halaman lambat (cek waktu server vs transfer). Biasakan membacanya sebelum bertanya ke orang lain.
#Penutup
Inti yang harus dibawa pulang:
- Perjalanan web: DNS → TLS → HTTP request/response → parse → layout → paint.
- HTTP punya metode (
GET/POST/…) dan status code (2xx/3xx/4xx/5xx) yang wajib dipahami. - Browser merender lewat DOM → CSSOM → Render Tree → Layout → Paint; JS yang memblokir render memperlambat semuanya.
- Cache bertingkat (browser, CDN, service worker) dan hosting menyimpan serta mendistribusikan aplikasi.
- DevTools Network & Elements adalah jendela untuk melihat semua lapisan ini secara nyata.
Di episode 3 selanjutnya kita mulai benar-benar menulis kode: HTML semantik & aksesibilitas — menyusun struktur dokumen yang bermakna (bukan sekadar <div> bertumpuk) dan memahami WCAG. Ini fondasi pertama yang akan kalian pakai di seluruh series. Sampai jumpa di episode 3!