0Pricing
Frontend Academy · Pelajaran

DNS dan HTTP Browser: Siklus Hidup Permintaan

Ikuti URL dari bilah alamat melalui resolusi DNS, koneksi TCP, permintaan HTTP, dan respons server kembali ke browser.

DNS dan HTTP Browser: Siklus Hidup Permintaan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang Terjadi Saat Anda Mengetik URL?

Setiap kali Anda mengunjungi situs web, browser memulai rangkaian langkah yang teratur. Memahami rangkaian ini membuat Anda menjadi pengembang yang lebih baik — Anda mengetahui bagian mana yang dapat bermasalah dan cara mempercepatnya.

Langkah 1 — Resolusi DNS

DNS (Domain Name System) adalah buku telepon internet. Browser Anda bertanya kepada penyelesai DNS: "Alamat IP apa yang berada di balik example.com?". Penyelesai tersebut memeriksa cache dan, jika diperlukan, meminta informasi dari server nama otoritatif.

# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NS

Langkah 2 — Jabat Tangan TCP

Setelah IP diketahui, browser membuka koneksi TCP menggunakan jabat tangan tiga arah: SYN → SYN-ACK → ACK. Untuk HTTPS, proses ini dilanjutkan dengan jabat tangan TLS yang menegosiasikan enkripsi.

Langkah 3 — Permintaan HTTP

Browser mengirim permintaan HTTP melalui koneksi TCP. Permintaan ini mencakup metode (GET, POST…), jalur (/index.html), versi HTTP, dan header seperti Host serta Accept.

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0

Langkah 4 — Respons HTTP

Server memproses permintaan tersebut dan mengirimkan respons: kode status (200 OK, 404 Tidak Ditemukan…), header respons (Content-Type, Cache-Control), dan isi (HTML, JSON, atau byte gambar).

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

HTTP/1.1 vs HTTP/2 vs HTTP/3

HTTP/1.1 mengirim satu permintaan untuk setiap koneksi. HTTP/2 melakukan multiplexing terhadap banyak permintaan melalui satu koneksi. HTTP/3 menggunakan QUIC (berbasis UDP) untuk latensi yang lebih rendah, terutama pada jaringan seluler yang sering kehilangan paket.

Kode Status yang Wajib Anda Ketahui

2xx = berhasil (200 OK, 201 Dibuat). 3xx = pengalihan (301 Dipindahkan Permanen, 304 Tidak Diubah). 4xx = kesalahan klien (400, 401, 403, 404). 5xx = kesalahan server (500, 502, 503).

HTTPS dan TLS

HTTPS membungkus HTTP di dalam TLS (Transport Layer Security). TLS menyediakan: enkripsi agar lalu lintas tidak dapat dibaca, autentikasi melalui sertifikat (Anda benar-benar sedang berkomunikasi dengan example.com), serta integritas agar data tidak diubah tanpa izin.

Penyimpanan Cache: Mempercepat Kunjungan Berulang

Respons dapat menyertakan Cache-Control: max-age=86400 sehingga browser menggunakan kembali salinan yang tersimpan dalam cache selama satu hari. Header ETag dan Last-Modified memungkinkan browser memeriksa apakah versi yang tersimpan dalam cache masih terbaru.

Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMT

Cookie dan Sesi

Server menetapkan cookie menggunakan header Set-Cookie. Browser mengirimkannya kembali secara otomatis pada setiap permintaan ke domain yang sama. Sesi biasanya berupa cookie yang berisi ID sesi, yang dipetakan oleh server ke data pengguna.

CDN — Jaringan Distribusi Konten

CDN menyimpan salinan aset Anda di pusat data di seluruh dunia. Pengguna mengunduhnya dari simpul terdekat sehingga latensi berkurang. Cloudflare, Fastly, dan AWS CloudFront adalah CDN populer yang digunakan oleh sebagian besar situs web besar.

Periksa Cepat

Metode HTTP mana yang digunakan untuk meminta halaman web dari server?

Ringkasan: Siklus Hidup Permintaan Lengkap

URL dimasukkan → DNS menerjemahkan domain menjadi IP → koneksi TCP (+ TLS) dibuat → Browser mengirim permintaan HTTP → Server merespons dengan status + header + isi → Browser merender respons. Setiap langkah dapat diamati di panel Jaringan pada DevTools.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “DNS dan HTTP Browser: Siklus Hidup Permintaan” gratis?

Ya — teks lengkap “DNS dan HTTP Browser: Siklus Hidup Permintaan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “DNS dan HTTP Browser: Siklus Hidup Permintaan”?

Ikuti URL dari bilah alamat melalui resolusi DNS, koneksi TCP, permintaan HTTP, dan respons server kembali ke browser. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “DNS dan HTTP Browser: Siklus Hidup Permintaan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. DNS dan HTTP Browser: Siklus Hidup Permintaan
  2. HTML, CSS, dan JavaScript: Tugas Setiap Lapisan
  3. Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint
  4. Alat Pengembang: Membuka dan Menggunakan DevTools
← Kembali ke Frontend Academy