Was passiert im Prozess von der Eingabe der URL bis zum Abschluss des Seitenladens und der Anzeige einer Seite?

Für verschiedene Betriebsmethoden der URL in der Adressleiste gibt es verschiedene Möglichkeiten, Ressourcen zu laden und Daten abzurufen. Der folgende detaillierte Vorgang gilt für " Geben Sie die URL in die Adressleiste ein und drücken Sie Geben Sie ein. Schlüssel zum Laden von Ressourcen " Diese Operationsmethode wird zur Analyse verwendet. Der Prozess anderer Methoden ist ähnlich und die Unterschiede werden später analysiert.

　1. Der Browser öffnet einen Thread zur Verarbeitung der Anfrage. Wenn die URL als http-Protokoll eingestuft wird, wird sie gemäß der Web-Methode verarbeitet

　2. Der Browser überprüft zuerst den Browser-Cache-System-Cache-Router-Cache. Wenn sich einer im Cache befindet, wird der Seiteninhalt angezeigt direkt auf dem Bildschirm angezeigt (Zu diesem Zeitpunkt wird keine Anfrage an den Server gesendet). Wenn nicht, fahren Sie mit dem nächsten Schritt fort (Sie müssen später eine Anfrage an den Server senden); 🎜> 　3. Erhalten Sie die IP-Adresse der Website durch

DNS-Auflösung

; 　4. Stellen Sie eine TCP-Verbindung zum echten

IP-Adressserver her und richten Sie einen

TCP-Drei-Wege-Handshake mit dem Browser ein. 　5. Nachdem der Handshake erfolgreich war, wird die

HTTP

-Protokollsitzung durchgeführt und der Browser sendet den Header (Request Header); 　6.

Geben Sie den

Webserver auf dem Web-Server ein, z. B. Apache , Tomcat, Node.JS und andere Server; 　7.

Geben Sie die bereitgestellte Backend-Anwendung ein, z. B.

PHP, Java, JavaScript, Python usw. finden Sie die entsprechende Anforderungsverarbeitung ; 　8

Die Verarbeitung beendet den Feedback-Header und gibt die Daten an den Browser zurück

; 　9 Der Browser beginnt mit dem Herunterladen des

HTMLDokuments(Antwortheader, Statuscode 200) und gleichzeitig den Cache festlegen ; 　10. Der Browser analysiert dann die gesamte HTML-Struktur, um den DOM-Baum zu bilden. Gleichzeitig muss er auch die entsprechende

CSS-Datei analysieren, um

zu bilden CSS-Baum (CSSOM).  Als nächstes müssen Sie das DOM CSSOM kombinieren, um einen Rendering-Baum (Render Tree) zu bilden;

　11. Nachdem Sie den Baum gezeichnet haben, müssen Sie die Position jedes Knotens auf der Seite berechnen. Dieser Vorgang wird als Layout

bezeichnet

12. Der Layoutprozess wird auf einer kontinuierlichen zweidimensionalen Ebene durchgeführt. Als nächstes müssen diese Ergebnisse gerastert und auf die diskrete zweidimensionale Ebene des Bildschirms abgebildet werden

　　Der Vorgang wird Paint genannt. Um die Leistung zu verbessern, unterteilen moderne Browser die Seite in mehrere Ebenen, malen jede einzelne Ebene und kombinieren sie dann zu einer Seite (zusammengesetzte Ebenen).

　

PS: Das eingangs genannte ist für die URL bar. Verschiedene URL-Operationsmethoden haben unterschiedliche Methoden zum Laden von Ressourcen und zum Abrufen von Daten >

1. „Gehe zu“ oder drücken Sie die Eingabetaste in der Adressleiste, um zu aktualisieren: siehe oben

2. F5-Aktualisierung: Es gibt keinen Schritt 2 und der Rückgabewert wird in Schritt 8 beurteilt. Wenn 304 zurückgegeben wird, bedeutet dies, dass dies der Fall ist verfügt über einen Cache. Verwenden Sie zu diesem Zeitpunkt , um direkt zwischenzuspeichern. Wenn 200 zurückgibt, bedeutet dies, dass nicht zwischengespeichert ist und die Sequenz bis zum Ende ausgeführt wird

3. Der Unterschied zwischen Strg F5 beim Aktualisieren der Webseite: hat keinen Schritt 2 und muss 200 in zurückgeben Schritt 8 und nacheinander bis zum Ende ausführen

(Für die oben genannten drei verschiedenen Methoden ist es besser, sie vom Caching-Mechanismus des http-Protokolls zu unterscheiden, der leichter zu verstehen ist. Hier haben wir Konzentrieren Sie sich mehr auf die Serverseite. Unterscheiden Sie zwischen dem Senden einer Anfrage und ihrem Rückgabewert)

PS: Schritte 10-12 konzentrieren sich mehr auf den Front-End-Rendering-Seitenprozess. Bitte beachten Sie: http://www.jianshu.com/p/016e8e78eb1f