Fondasi: Komputermu, Web, dan Alat Kerjamu · 4/7

Cara kerja web: dari URL sampai jadi tampilan

DNS, alamat IP, server, dan browser — perjalanan request-mu, langkah demi langkah.

Baca 22 menit

Setelah pelajaran ini kamu bisa

Melacak apa yang terjadi antara menekan Enter di sebuah URL sampai halaman muncul
Menjelaskan fungsi DNS dan kenapa ia ada
Menyebutkan bagian-bagian sebuah URL
Menjelaskan apa sebenarnya sebuah server

Ini pertanyaan yang akan ditanyakan di interview selama sepuluh tahun ke depan, dan alasannya bukan sekadar hafalan. Hampir setiap bug yang akan kamu telusuri berada di suatu titik di jalur ini.

Anatomi sebuah URL

text

https://shop.example.com:443/products/42?color=red#reviews
└─┬─┘   └───────┬───────┘└┬┘└─────┬────┘└────┬───┘└──┬──┘
scheme        host       port    path      query   fragment

Bagian	Fungsinya
scheme	Protokol yang dipakai. `https` itu `http` di dalam enkripsi.
host	Mesin mana yang dituju, berdasarkan nama
port	Pintu mana di mesin itu. 443 untuk https, 80 untuk http — biasanya disembunyikan.
path	Resource mana di server itu
query	Parameter tambahan, berupa pasangan `key=value` setelah `?`
fragment	Hanya untuk browser. Tidak pernah dikirim ke server.

Langkah 1: nama jadi angka

Mesin di internet ditemukan lewat IP address, sebuah angka seperti 93.184.216.34. Manusia tidak bisa mengingat itu, jadi kita pakai nama. DNS — Domain Name System — adalah buku telepon yang mengubah example.com jadi sebuah IP address.

Langkah 2: koneksi terbuka

Browser-mu membuka koneksi TCP ke IP dan port itu. TCP menjamin byte-nya sampai, berurutan, atau kamu tahu kalau gagal. Untuk https, lalu terjadi TLS handshake: kedua sisi menyepakati kunci enkripsi dan browser-mu memeriksa sertifikat server untuk memastikan ia benar-benar seperti yang diakuinya.

Langkah 3: request dan response

Sekarang browser-mu mengirim HTTP request — sepotong teks singkat yang menyatakan apa yang diinginkannya. Server mengirim balik HTTP response: sebuah status code, beberapa header, dan biasanya sebuah body. Pelajaran berikutnya membedah keduanya secara detail.

Langkah 4: browser membangun halaman

Parse HTML jadi pohon object — yaitu DOM.
Temukan referensi ke CSS, JavaScript, gambar, dan font, lalu minta semuanya juga.
Terapkan CSS untuk menentukan tampilan setiap elemen.
Hitung posisi dan ukuran (layout), lalu gambar pikselnya (paint).
Jalankan JavaScript, yang kemudian bisa mengubah semua hal di atas.

Satu kali membuka halaman jarang berarti satu request. Biasanya puluhan: HTML-nya, lalu setiap aset yang disebutnya, lalu apa pun yang diminta JavaScript setelahnya.

Tugas praktik

Buka DevTools browser, ke tab Network, lalu buka situs berita mana pun. Hitung jumlah request-nya. Urutkan berdasarkan ukuran, lalu berdasarkan waktu. Temukan satu yang paling lambat dan satu yang paling besar. Ini bahan mentah dari setiap diskusi performa yang akan kamu ikuti.

Hasil yang diharapkan

Biasanya 50–200 request untuk satu halaman.