Apa yang sebenarnya terjadi ketika Anda menjelajahi situs web di browser Anda?

64

Apa yang terjadi di balik layar ketika kita mengetik www.cnn.com di browser dan bagaimana informasi ditampilkan di layar?

Penjelasan teknis akan sangat dihargai.

Rachel
sumber
Penjelasan teknis yang luar biasa dapat ditemukan dalam buku ini: Jaringan Komputer: Pendekatan Top-Down Edisi 6 (Tautan: Buku ). (halaman 495-500) Mereka masuk ke banyak detail; mulai dari apa yang terjadi ketika komputer dinyalakan hingga waktu situs web ditampilkan di browser pengguna. Anda bisa merasakan apa yang disebutkan dalam buku di set slide ini. (Tautan: Slide 88 hingga 95)
Slothworks
Anda dapat menemukan informasi terperinci di sini: github.com/vasanthk/how-web-works atau di sana html5rocks.com/en/tutorials/internals/howbrowserswork
mems

Jawaban:

134

Browser: "Oke, jadi, saya punya pengguna yang meminta alamat ini: www.cnn.com. Saya pikir karena tidak ada garis miring atau apa pun, ini adalah permintaan langsung dari halaman utama. Juga tidak ada protokol atau port yang ditentukan, jadi saya akan menganggap itu HTTP dan pergi ke port 80 ... oh well, hal pertama yang pertama. Hei DNS, sobat, bangun! Di mana www.cnn.com ini bersembunyi? "

DNS: "Benar ... tunggu sebentar, aku akan bertanya ke server ISP. Ok, sepertinya 157.166.226.25."

Browser: "Ok. Internet Protocol Suite, giliran Anda! Panggil 157.166.226.25, tolong. Kirimkan header HTTP ini. Mereka meminta struktur dasar dan konten halaman utama mereka jadi saya tahu apa lagi yang harus diambil ... oh well, bukan karena kamu akan peduli tentang ini kurasa. "

TCP / IP: "Apa maksudmu giliranku ? Seolah-olah aku tidak hanya mengerjakan punggungku di sana untuk DNS? Ya Tuhan, apa yang diperlukan untuk mendapat sedikit apresiasi di sini ..."

Browser: ...

TCP / IP: "Ya, ya ... Menghubungkan ... Saya hanya akan meminta gateway untuk meneruskannya. Anda tahu, itu tidak mudah, saya harus membagi permintaan cantik Anda di sana menjadi beberapa bagian jadi itu mencapai akhir, dan mengumpulkan semua barang yang mereka kirim kembali dari ribuan paket yang saya dapatkan ... ah, benar, Anda tidak peduli. Angka. "

Sementara itu, di kantor pusat CNN, sebuah pesan akhirnya berakhir di pintu Server Web.

CNN Web Server: "Nzhôô! Pelanggan! Dia ingin berita! Halaman Depan! Bagaimana?"

CNN Server Side Script Engine: "Benar, akan lakukan! Halaman depan, kan?"

Server Database CNN: "Ya! Bekerja untuk saya! Konten apa yang Anda butuhkan?"

CNN Server Side Script Engine: "... um, maaf DB, saya punya salinan halaman depan di sini di cache saya, tidak perlu mengkompilasi apa pun. Tapi hei, ambil ID pengguna ini dan simpan, saya akan mengirimkannya kepada pelanggan juga, jadi kami tahu kepada siapa kami bicara nanti. "

Server Database CNN: "Yey!"

Kembali ke komputer pengguna ...

TCP / IP: "Ooookay, inilah jawabannya. Oh nak, mengapa aku punya perasaan ini akan menjadi besar ..."

Browser: "Eh, wow ... ini memiliki semua jenis kode javascript ... banyak gambar, beberapa bentuk ... Benar, ini akan memakan waktu cukup lama untuk diterjemahkan. Lebih baik sampai di sana. Hei, sistem IP, ada banyak hal lagi yang perlu Anda dapatkan. Mari kita lihat saya perlu beberapa stylesheet dari i.cdn.turner.com - via HTTP dan minta file /cnn/.element/css/2.0/common.css. Dan lalu dapatkan beberapa skrip itu di i.cdn.turner.com juga, saya menghitung enam sejauh ini ... "

TCP / IP: "Saya mendapatkan gambarnya. Beri saya alamat server dan semua itu. Dan bungkus barang-barang itu di dalam permintaan HTTP, saya tidak mau berurusan dengan itu."

DNS: "Memeriksa i.cdn.turner.com ... hei, sedikit hal sepele, sebenarnya disebut cdn.cnn.com.c.footprint.net. IP adalah 4.23.41.126"

Browser: "Tentu, tentu ... tunggu sebentar, ini akan membutuhkan beberapa nsec untuk diproses, saya mencoba memahami semua skrip ini ..."

TCP / IP: "Hei, ini CSS yang Anda minta. Oh, dan ... ya, skrip tambahan itu juga baru saja kembali."

Browser: "Wah, masih ada lagi ... semacam iklan video!"

TCP / IP: "Ya ampun, menyenangkan sekali kedengarannya seperti ..."

Browser: "Ada segala macam gambar juga! Dan CSS ini terlihat agak jahat ... benar, jadi jika bagian itu ada di sana, dan memiliki baris ini di bagian atas ... bagaimana bisa cocok lagi ... tidak , Saya harus merentangkan ini sedikit untuk membuatnya ... Oh, tapi file CSS lain menimpa aturan itu ... Yah, ini tidak akan mudah untuk dirender, itu pasti! "

TCP / IP: "Ok, ok, berhenti mengganggu saya sebentar, masih banyak yang harus dilakukan di sini."

Browser: "Pengguna, ini laporan perkembangan kecil untuk Anda. Maaf, ini mungkin perlu beberapa detik, ada 140 elemen yang berbeda untuk dimuat, dan mencapai 16 sejauh ini."

Satu atau dua detik kemudian ...

TCP / IP: "Baiklah, itu saja. Hei, dengarkan ... maaf saya membentak Anda sebelumnya, Anda mengelola di sana? Ini sepertinya cukup berat untuk Anda juga."

Browser: "Fiuh, ya, ini semua situs web ini sekarang, mereka tentu tidak membuatnya mudah bagi Anda. Yah, saya akan mengaturnya. Untuk itulah saya di sini."

TCP / IP: "Saya kira ini cukup berat bagi kita semua hari ini ... oh, berhentilah bersenang-senang di sana!"

Browser: "Hai pengguna! Situs web siap - dapatkan berita Anda!"

Ilari Kajaste
sumber
17
Jadi inilah yang dilakukan PC saya setelah gelap.
Phoshi
7
Penjelasan Hebat ... Tutup untuk Anda ... Bingo ...
Rachel
7
Sepotong Wondeful mendongeng :)
Michael Borgwardt
5
@dex: ... dan sampai hari ini mereka masih kuat, memilah semua permintaan aneh pengguna dengan ketekunan yang layak dipuji dalam buku-buku sejarah. Tetapi, seperti semua hal lain, suatu hari akan tiba waktunya mereka untuk pensiun, dengan anggun membuat jalan ke pendekatan yang lebih modern yang cocok untuk zaman yang lebih modern. Tetapi yakinlah bahwa mereka akan selalu ada di sana, dalam warisan kami, menonton dengan senyum penuh pengertian dan meneruskan kepada generasi masa depan semua pelajaran sulit yang mereka pelajari selama masa-masa penuh semangat komunikasi internet yang sedang berkembang ini.
Ilari Kajaste
3
Hore untuk penentang, kan, @wahnfrieden? Saya menganggapnya cukup akurat, dan informatif.
Jürgen A. Erhard
18
  • Browser membagi apa yang Anda ketikkan (URL) menjadi nama host dan jalur.
  • Browser membentuk permintaan HTTP untuk meminta data di nama host dan jalur yang diberikan.
  • Browser melakukan pencarian DNS untuk menyelesaikan nama host menjadi alamat IP.
  • Browser membentuk koneksi TCP / IP ke komputer yang ditentukan melalui alamat IP. (Koneksi ini sebenarnya terbentuk dari banyak komputer, masing-masing meneruskan data ke yang berikutnya.)
  • Browser mengirimkan permintaan HTTP ke koneksi ke alamat IP yang diberikan.
  • Komputer itu menerima permintaan HTTP dari koneksi TCP / IP dan meneruskannya ke program server web.
  • Server web membaca nama host dan jalur dan menemukan atau menghasilkan data yang Anda minta.
  • Server web menghasilkan respons HTTP yang berisi data itu.
  • Server web mengirimkan respons HTTP itu kembali ke koneksi TCP / IP ke mesin Anda.
  • Browser menerima respons HTTP dan membaginya menjadi header (menggambarkan data) dan tubuh (data itu sendiri).
  • Browser menginterpretasikan data untuk memutuskan bagaimana menampilkannya di browser - biasanya ini adalah data HTML yang menentukan jenis informasi dan bentuk umumnya.
  • Beberapa data akan berupa metadata yang menentukan sumber daya lebih lanjut yang perlu dimuat, seperti style sheet untuk tata letak terperinci, atau gambar sebaris, atau film Flash. Metadata ini ditentukan lagi sebagai URL, dan seluruh proses ini berulang untuk masing-masing sampai semua dimuat.
Kylotan
sumber
Ini bagus, tetapi mungkin perlu menyebutkan caching (di browser dan di tempat lain), proksi, load balancing, CDNs, dan sebagainya. Saya pikir ini semua adalah bagian penting dari memahami bagaimana situs sibuk (di bumi) menangani jutaan permintaan yang hampir bersamaan untuk sejumlah besar konten.
Sam Dutton
12

Langkah pertama adalah pencarian DNS (Domain Name Server). Ia menggunakan server DNS yang ditentukan dalam pengaturan jaringan Anda (atau diberikan kepada Anda oleh DHCP) untuk mencari domain teratas (cnn.com) dan kemudian meminta server nama domain itu untuk alamat IP dari subdomain yang ditentukan (www.cnn.com).

Setelah memiliki alamat IP, browser Anda memulai komunikasi dengan server web. Ini dilakukan dengan menggunakan protokol yang ditentukan (yang biasanya default ke HTTP 1.1). Permintaan 'GET' untuk '/' dibuat ke server, yang merespons dengan isi dokumen HTML dan tajuk yang sesuai (yang memberi tahu peramban tentang jenis konten, HTML, dan informasi lainnya dari dokumen). Kemudian browser mem-parsing dokumen dan menemukan URL apa pun yang perlu disematkan di halaman (seperti gambar atau stylesheet yang ditautkan) dan melakukan GET permintaan pada masing-masing.

Browser juga biasanya secara otomatis membuat permintaan GET untuk '/favicon.ico' (untuk menampilkan ikon CNN kecil di sebelah judul situs).

Peramban Anda juga kemungkinan akan menentukan dalam tajuk permintaannya bahwa ia ingin konten respons dikompres, menggunakan algoritma gzip. Ini membuat pengunduhan file jauh lebih kecil, jika server mendukungnya. Ini semua transparan bagi Anda, meskipun itu seperti mengunduh file ZIP dan membuka ritsletingnya.

Ketika Anda memuat ulang halaman, browser Anda memeriksa apakah halaman itu sudah di-cache di sistem Anda, dan jika demikian, ia melakukan permintaan HTTP hanya untuk header dokumen, dan memeriksa tanggal yang dimodifikasi. Jika tanggal ini lebih lambat dari salinan yang di-cache, ia meminta isi dokumen lengkap lagi dan menyegarkan halaman. Kalau tidak, itu hanya menggunakan salinan lokal Anda.

wahnfrieden
sumber
Pria itu tidak tahu dasar-dasarnya dan Anda baru saja gagal dengan DNS, DHCP, dan IP. Mari kita jelaskan struktur paket IP kepadanya!
6
Dia meminta detail teknis. Dia bisa mencari IP jika dia mau.
Masalahnya adalah dia mungkin tidak ingin mencari apa pun ... :(
8

Hilang sejauh ini dari jawaban lain adalah apa yang terjadi di sisi CNN:

  • Mesin di CNN menerima pesan dari komputer Anda yang meminta halaman tersebut.
  • Itu mengalihkan permintaan ini ke salah satu dari banyak komputer yang digunakan CNN untuk situs web-nya (alasannya adalah bahwa, dengan cara ini, Anda dapat menyebarkan pekerjaan menyusun halaman web respons melalui banyak komputer)
  • Komputer CNN menerima permintaan Anda dan merespons dengan halaman web yang mungkin hampir seluruhnya dikomputasi, tetapi mungkin itu akan mengubah beberapa hal sebelum mengirimkannya kepada Anda (bisa berupa iklan di bagian atas, mungkin berita utama). Terkadang komputer merakit halaman dari banyak komponen kecil setiap kali mereka menerima permintaan; tidak yakin apa yang CNN lakukan
  • respons berjalan melalui jaringan ke komputer Anda, yang kemudian menampilkannya.
  • responsnya tidak termasuk gambar: komputer Anda kemudian mengirim permintaan lain untuk gambar, dan cukup banyak skenario yang sama terjadi.
redtuna
sumber
6

Ini jelas bukan penjelasan teknis, tetapi ini adalah bantuan visual yang lucu (dari Vladstudio.com yang sangat baik ) yang mungkin bermanfaat bagi beberapa orang:

Bagaimana Internet Bekerja

grautur
sumber
1

Info yang baru saja Anda tanyakan dapat mengisi beberapa lusin buku. Tetapi ini adalah usaha saya untuk menjelaskannya: Browser Anda memberi tahu OS Anda untuk menemukan alamat IP cnn.com. Kemudian OS Anda meminta server DNS untuk alamat IP untuk cnn.com. IP dikirim ke broswer yang menghubungi alamat IP dan meminta halaman. cnn.com kemudian mengirimkan Anda dan halaman html. Browser mem-parsing html dan mengirimkan informasi ke renderer HTML. Browser kemudian memberi tahu OS apa yang harus ditampilkan di layar.

AyexeM
sumber
1

Ada video yang sangat keren oleh "Sendung mit der Maus" (acara TV anak-anak Jerman yang sangat populer yang menjelaskan teknologi untuk anak-anak):

Die Sendung mit der Maus - Wie funktioniert das Internet (Bagaimana Internet bekerja).

Hanya dalam bahasa Jerman, sayangnya, tetapi lucu bahkan tanpa teks. Pria dengan helm lucu memainkan paket IP, dan datanya tertulis di kartu kertas. Klasik :-).

BTW, penjelasannya sebenarnya cukup bagus.

sleske
sumber