Przede wszystkim, nie jestem zainteresowany w całym procesie żądanie-odpowiedź jako skierowana przez to pytanieOpisz proces renderowania strony w przeglądarce?
chcę wiedzieć, co dzieje się w przeglądarce, po otrzymaniu odpowiedzi HTML z serwer. Celem zadania tego pytania jest zrozumienie wewnętrznych szczegółów skryptów po stronie klienta. Korzystne byłoby również wyjaśnienie w abstrakcyjnych pojęciach, z czego składa się przeglądarka internetowa. Możesz nazwać je silnikiem CSS, silnikiem javascript itp. Celem jest precyzyjna wizualizacja rozwoju mojej strony internetowej.
Niestety, nie znalazłem żadnych zasobów internetowych zajmujących się tym problemem. Proszę wybaczyć mi, jeśli istnieją zasoby, które wyjaśniają te pojęcia. Możesz wskazać zasoby (książki itp.), Jeśli to pytanie jest zbyt wyczerpujące, aby odpowiedzieć.
[kod źródłowy WebKit] (http://www.webkit.org/building/checkout.html)/[kod źródłowy Mozilla] (https://developer.mozilla.org/en/Download_Mozilla_Source_Code) – Quentin
Szukam jakiegoś abstrakcyjnego opisu, który pomaga przeciętnemu twórcy stron internetowych wizualizować proces tworzenia skryptów po stronie klienta. Jestem pewien, że nawet jeśli ktoś napisze mozillę od podstaw, to również wizualizuje to w jakiś abstrakcyjny sposób. – pphanireddy
@pphanireddy, Przeczytałem "Jak działają przeglądarki" i zastanawiam się, czy podczas analizowania html i spotkania
Proszę przejść poniżej etapów i powinno być jasne, z żądaniem cyklu i sposób renderowania odpowiedzi.
Wpisz adres URL na pasku adresu w preferowanej przeglądarce.
Przeglądarka analizuje adres URL, aby znaleźć protokół, host, port i ścieżkę.
Tworzy żądanie HTTP (który był najprawdopodobniej protokół)
dotrzeć do gospodarza, to musi najpierw przetłumaczyć czytelnej serwerado numer IP, a robi to wykonując DNS odnośnika na hoście
Następnie gniazdo musi być otwarty z komputera użytkownika do tego numeru IP na porcie określonym (w większości portów często 80)
Gdy połączenie jest otwarte, żądanie HTTP wysyłane do hosta Host przesyła żądanie do serwera s oftware (najczęściej Apache) skonfigurowany do nasłuchiwania na określonym porcie
Serwer sprawdza żądanie (najczęściej tylko ścieżka) i uruchamia wtyczkę serwera potrzebną do obsługi żądania (odpowiada używanemu językowi serwera, PHP, Java, .NET, Python?)
Wtyczka uzyskuje dostęp do pełnego żądania i rozpoczyna przygotowywanie odpowiedzi HTTP.
Aby skonstruować odpowiedź, dostępna jest (najprawdopodobniej) baza danych.Wyszukiwanie bazy danych odbywa się na podstawie parametrów w ścieżce (lub danych) żądania
Dane z bazy danych wraz z innymi informacjami, które wtyczka postanawia dodać, są łączone w długi ciąg tekstu (prawdopodobnie HTML).
Wtyczka łączy dane z niektórymi metadanymi (w postaci nagłówków HTTP) i wysyła odpowiedź HTTP z powrotem do przeglądarki.
Przeglądarka odbiera odpowiedź i analizuje HTML (który z prawdopodobieństwem 95% jest uszkodzona) w odpowiedzi
drzewo DOM jest zbudowany z łamanego HTML
Nowe żądania są wykonane na serwerze dla każdego nowego zasobu, który znajduje się w źródle HTML (zazwyczaj obrazy, arkusze stylów i pliki JavaScript).
Powróć do kroku 3 i powtórz dla każdego zasobu.
Arkusze stylów są przetwarzane i renderowania informacji w każdy dostaje dołączone do węzła dopasowania w drzewie DOM
JavaScript jest analizowany i wykonywany, a węzły DOM są przemieszczane i informacje o stylu jest odpowiednio aktualizowany
przeglądarka renderuje stronę na ekranie zgodnie z drzewa DOM oraz informacji o stylu dla każdego węzła
zobaczysz stronę na ekranie
Denerwujesz się, że cały proces był zbyt powolny.
Źródło
2016-02-26 07:05:02
Przeglądarka rozpoczyna renderowanie strony zaraz po przeanalizowaniu pierwszego elementu HTML. Z pewnością nie czeka na zakończenie drzewa DOM, a tym bardziej na załadowanie wszystkich zewnętrznych zasobów. Być może możesz edytować swoją odpowiedź, aby wyjaśnić, że co najmniej niektóre kroki w grupie 13-18 przebiegają jak potoki (jeden element na raz?), A nie sekwencyjnie. – max