Co dokładnie dzieje się, gdy przeglądasz witrynę w przeglądarce?

64

Co dzieje się za kulisami, gdy w przeglądarce wpisujemy www.cnn.com i jak wyświetla się informacja na ekranie?

Wyjaśnienie techniczne byłoby bardzo mile widziane.

Rachel
źródło
Świetne wyjaśnienie techniczne można znaleźć w tej książce: Sieci komputerowe: podejście odgórne 6. wydanie (Link: Książka ). (strony 495–500) Wnikają w wiele szczegółów; zaczynając od tego, co dzieje się po włączeniu komputera, aż do momentu wyświetlenia strony internetowej w przeglądarce użytkownika. W tym zestawie slajdów możesz posmakować tego, co wspomniano w książce. (Link: Slajdy 88 do 95)
Slothworks
Możesz znaleźć szczegółowe informacje tutaj: github.com/vasanthk/how-web-works lub tam html5rocks.com/en/tutorials/internals/howbrowserswork
mems

Odpowiedzi:

134

Przeglądarka: „Ok, więc mam użytkownika proszącego o ten adres: www.cnn.com. Sądzę, że ponieważ nie ma żadnych ukośników ani nic, jest to bezpośrednie żądanie strony głównej. Nie zdefiniowano również protokołu ani portu, więc założę, że to HTTP i przejście do portu 80 ... no cóż, pierwsze rzeczy. Hej, DNS, kolego, obudź się! Gdzie jest ta strona www.cnn.com? "

DNS: „Racja… poczekaj chwilę, zapytam serwery ISP. Ok, wygląda to na 157.166.226.25.”

Przeglądarka: „Ok. Internet Protocol Suite, twoja kolej! Zadzwoń 157.166.226.25, proszę. Wyślij im ten nagłówek HTTP. Pyta o podstawową strukturę i treść ich strony głównej, więc wiem, co jeszcze można pobrać ... no cóż, Chyba nie, że ci na tym zależy.

TCP / IP: „Co masz na myśli mówiąc o mojej kolejce ? Jakbym nie pracował po prostu w tym miejscu dla DNS? Boże, ile potrzeba, aby zyskać tu trochę uznania?”

Przeglądarka: ...

TCP / IP: „Tak, tak ... Łączę się ... Poproszę bramę o przesłanie go dalej. Wiesz, to nie jest takie proste, będę musiał podzielić twoją śliczną prośbę na wiele części więc dotrze do końca i zbierz wszystkie rzeczy, które odeślą z wszystkich tysięcy paczek, które dostaję ... och, nie obchodzi cię to. Liczby. "

Tymczasem w centrali CNN wiadomość w końcu trafia do drzwi serwera WWW.

Serwer sieci CNN: „Nzhôô! Klient! Chce wiadomości! Strona główna! A co powiesz na to?”

Mechanizm skryptów po stronie serwera CNN: „Tak, zrobię! Pierwsza strona, prawda?”

Serwer bazy danych CNN: „Tak! Pracuj dla mnie! Jakiej treści potrzebujesz?”

Silnik skryptu po stronie serwera CNN: „... um, DB, mam kopię pierwszej strony tutaj w mojej pamięci podręcznej, nie trzeba niczego kompilować. Ale hej, weź ten identyfikator użytkownika i zapisz go, wyślę go również do klienta, dzięki czemu wiemy, z kim będziemy rozmawiać później ”.

Serwer bazy danych CNN: „Yey!”

Z powrotem na komputerze użytkownika ...

TCP / IP: „Ooookay, oto odpowiedź. Och, chłopcze, dlaczego mam wrażenie, że to będzie duże ...”

Przeglądarka: „Eee, wow ... to ma wiele rodzajów kodu javascript ... kilka zdjęć, kilka formularzy ... Renderowanie zajmie trochę czasu. Lepiej się do tego dostań. Hej, system IP, jest jeszcze kilka rzeczy, które musisz zdobyć. Zobaczmy, że potrzebuję kilku arkuszy stylów z i.cdn.turner.com - przez HTTP i poproś o plik /cnn/.element/css/2.0/common.css. I następnie zdobądź niektóre z tych skryptów również na i.cdn.turner.com, do tej pory liczę sześć… ”

TCP / IP: „Dostaję obraz. Po prostu podaj mi adresy serwera i tak dalej. I zawiń te pliki w żądaniu HTTP, nie chcę sobie z tym poradzić.”

DNS: „Sprawdzanie i.cdn.turner.com ... hej, trochę ciekawostek, tak naprawdę nazywa się cdn.cnn.com.c.footprint.net. IP to 4.23.41.126”

Przeglądarka: „Jasne, jasne… poczekaj sekundę, przetworzenie zajmie kilka sekund, próbuję zrozumieć cały ten skrypt…”

TCP / IP: „Hej, oto CSS, o który prosiłeś. Och i… tak, te dodatkowe skrypty też wróciły”.

Przeglądarka: „Uff, jest więcej… coś w rodzaju reklamy wideo!”

TCP / IP: „O rany, co to za zabawa…”

Przeglądarka: „Są też wszelkiego rodzaju obrazy! I ten CSS wygląda trochę paskudnie… tak, więc jeśli ta część tam idzie i ma tę linię na górze… jak do diabła by to pasowało… nie , Muszę to trochę rozciągnąć, aby to zrobić ... Och, ale ten inny plik CSS przesłania tę zasadę ... Cóż, ten plik nie będzie łatwy do renderowania, to na pewno! "

TCP / IP: „Ok, ok, przestań mnie rozpraszać na chwilę, wciąż jest wiele do zrobienia”.

Przeglądarka: „Użytkownik, oto mały raport z postępów. Przepraszam, może to potrwać kilka sekund, do załadowania jest około 140 różnych elementów, a do tej pory było 16.”

Jedna lub dwie sekundy później ...

TCP / IP: „Ok, to powinno być wszystko. Hej, słuchaj ... przepraszam, że wcześniej cię warknąłem, radzisz sobie z tym? To z pewnością wydaje się całkiem spore dla ciebie.”

Przeglądarka: „Uff, tak, to wszystkie te strony w dzisiejszych czasach, z pewnością ci to nie ułatwi. Cóż, dam radę. Po to tu jestem.”

TCP / IP: „Wydaje mi się, że w dzisiejszych czasach jest to dla nas dość ciężkie… och, przestańcie się tak zachwycać DNS!”

Przeglądarka: „Hej, użytkownik! Witryna jest gotowa - idź po wiadomości!”

Ilari Kajaste
źródło
17
Tak właśnie robi mój komputer po zmroku.
Phoshi
7
Świetne wyjaśnienie ... Czapka z głów dla ciebie ... Bingo ...
Rachel
7
Cudowny kawałek opowiadania :)
Michael Borgwardt
5
@dex: ... i do dziś są silni, rozwiązując wszystkie kapryśne żądania użytkownika z należytą starannością godną pochwały w księgach historii. Ale, jak wszystkie rzeczy, pewnego dnia nadejdzie ich czas, aby przejść na emeryturę, z wdziękiem ustępując miejsca bardziej nowoczesnym podejściom dostosowanym do bardziej współczesnych czasów. Ale bądź pewny, że zawsze tam będą, w naszym dziedzictwie, oglądając ze świadomym uśmiechem i przekazując przyszłym pokoleniom wszystkie ciężkie lekcje, których nauczyli się w tych dynamicznych czasach pojawiającej się komunikacji internetowej.
Ilari Kajaste
3
Brawo dla naysayers, prawda, @wahnfrieden? Uważam to za dość dokładne i pouczające.
Jürgen A. Erhard
18
  • Przeglądarka dzieli wpisane przez ciebie słowo (URL) na nazwę hosta i ścieżkę.
  • Przeglądarka tworzy żądanie HTTP z zapytaniem o dane przy podanej nazwie hosta i ścieżce.
  • Przeglądarka wykonuje wyszukiwanie DNS, aby rozpoznać nazwę hosta na adres IP.
  • Przeglądarka tworzy połączenie TCP / IP z komputerem określonym przez adres IP. (To połączenie jest w rzeczywistości utworzone z wielu komputerów, z których każdy przekazuje dane do następnego.)
  • Przeglądarka wysyła żądanie HTTP w dół połączenia na podany adres IP.
  • Ten komputer odbiera żądanie HTTP z połączenia TCP / IP i przekazuje je do programu serwera WWW.
  • Serwer WWW odczytuje nazwę hosta i ścieżkę oraz wyszukuje lub generuje dane, o które prosiłeś.
  • Serwer WWW generuje odpowiedź HTTP zawierającą te dane.
  • Serwer WWW wysyła odpowiedź HTTP z powrotem przez połączenie TCP / IP do komputera.
  • Przeglądarka odbiera odpowiedź HTTP i dzieli ją na nagłówki (opisujące dane) i treść (same dane).
  • Przeglądarka interpretuje dane, aby zdecydować, jak wyświetlić je w przeglądarce - zazwyczaj są to dane HTML określające typy informacji i ich ogólną formę.
  • Niektóre dane będą metadanymi, które określają dalsze zasoby, które należy załadować, takie jak arkusze stylów dla szczegółowego układu lub obrazy wbudowane lub filmy Flash. Te metadane są ponownie określane jako adres URL, a cały proces powtarza się dla każdego z nich, aż wszystkie zostaną załadowane.
Kylotan
źródło
Jest to dobre, ale warto wspomnieć o buforowaniu (w przeglądarce i innych miejscach), serwerach proxy, równoważeniu obciążenia, CDN i tak dalej. Myślę, że są to kluczowe elementy zrozumienia, w jaki sposób (na ziemi) ruchliwe witryny obsługują miliony niemal równoczesnych próśb o ogromne ilości treści.
Sam Dutton,
12

Pierwszym krokiem jest wyszukiwanie DNS (Domain Name Server). Wykorzystuje serwery DNS określone w ustawieniach sieci (lub podane przez DHCP), aby wyszukać domenę najwyższą (cnn.com), a następnie poprosić serwer nazw tej domeny o adres IP podanej domeny (www.cnn.com).

Po uzyskaniu adresu IP przeglądarka rozpoczyna komunikację z serwerem WWW. Odbywa się to przy użyciu określonego protokołu (który zwykle ma domyślną wartość HTTP 1.1). Do serwera wysyłane jest żądanie „GET” dla „/”, które odpowiada zawartością dokumentu HTML i odpowiednimi nagłówkami (które informują przeglądarkę o typie dokumentu, HTML i innych informacjach). Następnie przeglądarka analizuje dokument i znajduje adresy URL, które muszą zostać osadzone na stronie (takie jak obrazy lub połączone arkusze stylów) i wykonuje żądania GET na każdym z nich.

Przeglądarka zwykle zazwyczaj automatycznie wysyła żądanie GET do pliku „/favicon.ico” (w celu wyświetlenia małej ikony CNN obok tytułu witryny).

Twoja przeglądarka prawdopodobnie również określi w nagłówkach żądania, że ​​chce skompresować treść odpowiedzi, używając algorytmu gzip. Dzięki temu pobieranie pliku jest znacznie mniejsze, jeśli serwer go obsługuje. Wszystko to jest dla ciebie przezroczyste, nawet jeśli jest to jak pobranie pliku ZIP i rozpakowanie go.

Po ponownym załadowaniu strony przeglądarka sprawdza, czy strona jest już buforowana w systemie, a jeśli tak, wysyła żądanie HTTP tylko do nagłówka dokumentu i sprawdza jej datę modyfikacji. Jeśli ta data jest późniejsza niż jej kopia w pamięci podręcznej, ponownie żąda pełnej zawartości dokumentu i odświeża stronę. W przeciwnym razie po prostu używa lokalnej kopii.

wahnfrieden
źródło
Facet nie zna podstaw, a ty właśnie wysadziłeś go DNS, DHCP i IP. Wyjaśnijmy mu strukturę pakietu IP!
6
Poprosił o szczegóły techniczne. Może wyszukać IP, jeśli chce.
Chodzi o to, że prawdopodobnie nie chce niczego szukać ... :(
8

Do tej pory brakuje innych odpowiedzi, co dzieje się po stronie CNN:

  • Maszyna w CNN odbiera wiadomość z twojego komputera z prośbą o stronę.
  • Przekierowuje to żądanie na jeden z wielu komputerów używanych przez CNN w swojej witrynie internetowej (powodem tego jest to, że w ten sposób możesz rozłożyć pracę polegającą na tworzeniu stron internetowych odpowiedzi na wielu komputerach)
  • Komputer CNN otrzymuje twoją prośbę i odpowiada stroną internetową, która prawdopodobnie jest prawie całkowicie obliczona, ale może zmieni kilka rzeczy przed wysłaniem jej do ciebie (może to być reklama na górze, może nagłówek). Czasami komputery składają stronę z wielu małych elementów za każdym razem, gdy otrzymują żądanie; nie jestem pewien, co robi CNN
  • odpowiedź przechodzi przez sieć do twojego komputera, który następnie wyświetla ją.
  • odpowiedź nie obejmowała obrazów: komputer następnie wysyła kolejne żądanie obrazów i dzieje się prawie tak samo.
redtuna
źródło
6

To oczywiście nie jest techniczne wyjaśnienie, ale jest uroczą pomocą wizualną (z doskonałej strony Vladstudio.com ), która może być pomocna dla niektórych:

Jak działa Internet

grautur
źródło
1

Informacje, o które właśnie zapytałeś, mogą wypełnić kilkadziesiąt książek. Ale oto moja próba wyjaśnienia: Twoja przeglądarka informuje Twój system operacyjny, aby znalazł adres IP cnn.com. Następnie system operacyjny prosi serwer DNS o adres IP dla cnn.com. Adres IP jest wysyłany do broswer, który kontaktuje się z adresem IP i żąda strony. Następnie cnn.com wysyła Ci stronę HTML. Przeglądarki analizują HTML i wysyłają informacje do renderera HTML. Przeglądarka następnie informuje system operacyjny, co ma wyświetlać na ekranie.

AyexeM
źródło
1

Jest naprawdę fajny film „Sendung mit der Maus” (bardzo popularny niemiecki program telewizyjny dla dzieci, który wyjaśnia technologię dla dzieci):

Die Sendung mit der Maus - Wie funktioniert das Internet (Jak działa Internet).

Niestety tylko w języku niemieckim, ale zabawne nawet bez tekstu. Mężczyźni ze śmiesznymi hełmami grają w pakiety IP, a dane zapisywane są na kartach papierowych. Klasyczny :-).

BTW, wyjaśnienia są w rzeczywistości dość dobre.

Śleske
źródło