1. Nachdem der Browser die URL eingegeben hat, überprüft er den Cache
Überprüfen Sie, ob sich die Ressource im Cache befindet und frisch ist. Wenn ja, fahren Sie mit dem Transcodierungsschritt fort.
1.1 So prüfen Sie, ob es frisch ist:
---------Abgelaufen in HTTP1.0, der gespeicherte Wert ist die absolute Zeit, die das Cache-Datum angibt;
---------HTTP1.1 bietet Cache-Control:, das die maximale Frischezeit in Sekunden speichert;
Wenn neue Ressourcen nicht zwischengespeichert sind, stellen Sie eine neue Anfrage
2. Der Browser analysiert die URL, um Protokoll, Host, Portnummer und Pfad zu erhalten
3. Der Browser stellt eine HTTP-Anforderungsnachricht (GET) zusammen
4. Der Browser erhält die Host-IP-Adresse:
Browser-Cache---Lokaler Cache---Hostdatei----Router-Cache-------ISP-DNS-Cache-------Rekursive DNS-Abfrage (möglicherweise gibt es einen Lastausgleich, der dazu führt, dass jede IP-Adresse nicht funktioniert). Dasselbe)
5. Öffnen Sie einen Socket mit der Ziel-IP-Adresse und dem Ziel-Port, um eine TCP-Verbindung herzustellen (Drei-Wege-Handshake).
5.1 Der Client sendet eine ACK-Nachricht, SYN=1, Seq=X Wartestatus
5.2 Der Server gibt nach dem Empfang eine ACK-Nachricht zurück, SYN=1, ACK=X+1, Seq=Y im halbverbundenen Zustand
5.3 Der Client gibt nach dem Empfang eine ACK-Nachricht zurück, ACK=Y+1, Seq=Z, um den Verbindungsstatus zu ermitteln
Warum dreimal?
Weil es notwendig ist, die Sende-, Empfangs-, Empfangs- und Sendefunktionen von Client und Server zu bestimmen, um die Zuverlässigkeit der Verbindung festzustellen.
6. Senden Sie eine HTTP-Anfrage nach der TCP-Verbindung
7. Der Server empfängt und analysiert die Anforderung und sendet sie an ein Dienstprogramm, beispielsweise einen virtuellen Host, und verwendet den HTTP-Host-Header, um das Dienstprogramm der Anforderung zu ermitteln
8. Der Server prüft, ob der HTTP-Anforderungsheader Cache-Überprüfungsinformationen enthält und gibt den entsprechenden Statuscode zurück
9. Der Handler liest die vollständige Anfrage, um die HTTP-Antwort vorzubereiten und auf die Datenbank zuzugreifen
10. Der Server antwortet dem Browser
11. Der Browser empfängt die Antwort, schließt die TCP-Verbindung oder behält sie je nach Situation bei (winkt viermal)
11.1 Die aktive Partei sendet eine FIN-Nachricht, Fin=1, ACK=Z, Seq=X im halbgeschlossenen Zustand
11.2 Die passive Partei empfängt und sendet eine ACK-Nachricht mit dem Bestätigungsstatus ACK=X+1, Seq=Z
11.3 Die passive Partei sendet eine FIN-Nachricht, Fin=1, ACK=X, Seq=Y im halbgeschlossenen Zustand
11.4 Die aktive Partei akzeptiert und sendet eine ACK-Nachricht, ACK=Y, Seq=X, geschlossener Zustand
Warum viermal?
Tatsächlich ist es der Prozess, bei dem der Client und der Server die Verbindung freigeben. Beim Eintritt in diese Phase sendet die aktive Partei eine FIN-Nachricht, um die passive Partei anzuweisen, keine weiteren Daten zu senden. Wenn ein Daten-Push erforderlich ist, ist dies der Fall Es ist notwendig, auf den Abschluss des Pushs zu warten, bevor eine FIN-Nachricht zurückgegeben wird, um dem Schließen zuzustimmen.
12. Der Browser prüft den Antwortstatuscode
13. Cache-Ressourcen
14. Entschlüsseln Sie die Antwort
15. HTML analysieren, um einen DOM-Baum zu erstellen, Ressourcen herunterladen, um einen CSS-Baum zu erstellen, JS-Skript ausführen
15.1 Aufbau des DOM-Baums
1. Tokenisierung: Gemäß der HTML-Spezifikation wird der Zeichenstrom in einen Token-Strom analysiert
2. Lexing: Die lexikalische Analyse wandelt Token in Objekte um und definiert Eigenschaften und Regeln
3. DOM-Konstruktion: Bilden Sie einen DOM-Baum entsprechend der HTML-Tag-Beziehung und diesem Objekt
15.1 Wenn der Analysevorgang auf Bilder, Stile und JS-Dateien stößt, starten Sie den Download
15.1 Erstellen eines CSS-Baums
1. Tokenisieren: Konvertieren eines Zeichenstroms in einen Tokenstrom
2. Knoten: Erstellen Sie Knoten basierend auf Tags
3. CSSOM: Knoten erstellen CSS-Bäume
15.1 Aufbau des Rendering-Baums
1. Durchlaufen Sie alle sichtbaren Knoten vom Wurzelknoten des DOM-Baums.
Unsichtbare Knoten: Meta, Scritp, Hidden
2. Suchen Sie für jeden sichtbaren Knoten die entsprechende CSSOM-Regelanwendung
3. Veröffentlichen Sie sichtbare Knoteninhalte und Berechnungsstile
15.1 JS-Skript ausführen
1. Der Browser erstellt ein Document-Objekt, analysiert den HTML-Code und fügt die analysierten Elemente und Textknoten zum Dokument hinzu. Zu diesem Zeitpunkt wird document.readystate geladen
2. Wenn beim HTML-Parsing ein Skript ohne Async und Defer auftritt, fügen Sie es dem Dokument hinzu, führen Sie dann Inline- oder externe Skripte aus, führen Sie es synchron aus und der Parser hält an, wenn das Skript heruntergeladen oder ausgeführt wird, sodass Sie document.write( ) verwenden können. Als Methode zum Einfügen von Text in den Dokumentstrom definieren synchrone Skripte häufig einfach Funktionen und registrieren Ereignishandler. Sie können das Skript und den vorherigen Dokumentinhalt durchlaufen und bearbeiten
3. Wenn der Parser auf ein Skript mit gesetztem async- Attribut stößt, beginnt er mit dem Herunterladen des Skripts und fährt mit der Analyse des Dokuments fort. Das Skript wird ausgeführt, sobald es heruntergeladen wird , aber der Parser stoppt nicht und wartet auf den Download . Asynchronen Skripten ist die Verwendung von document.write() untersagt , sie können auf ihr eigenes Skript und vorherige Dokumentelemente zugreifen
4. Wenn das Dokument analysiert wird, wird document.readState interaktiv
5. Alle zurückgestellten Skripte werden in der Reihenfolge ausgeführt, in der sie im Dokument erscheinen . Zurückgestellte Skripte können auf den gesamten Dokumentbaum zugreifen , und document.write() ist verboten
6. Der Browser löst das DOMContentLoaded-Ereignis für das Document-Objekt aus
7. Zu diesem Zeitpunkt ist das Dokument vollständig analysiert und der Browser wartet möglicherweise noch auf das Laden von Inhalten wie Bildern. Nachdem der Inhalt geladen und alle asynchronen Skripte geladen und ausgeführt wurden , wird document.readState vollständig und der Das Fenster löst das Ladeereignis aus