Die Eingabe der URL der Browseradresse und das Drücken der Eingabetaste können in die folgenden Schritte unterteilt werden
1. Analysieren Sie die URL, um festzustellen, ob die URL zulässig ist. Anschließend prüft der Browser, ob ein Cache für die aktuelle URL vorhanden ist, und vergleicht, ob der Cache abgelaufen ist.
2. DNS löst die der URL entsprechende IP auf.
3. Stellen Sie eine TCP-Verbindung basierend auf IP her. (Dreier-Handschlag)
4. HTTP initiiert eine Anfrage.
5. Der Server verarbeitet die Anfrage und der Browser empfängt die HTTP-Antwort.
6. Rendern Sie die Seite und erstellen Sie den DOM-Baum.
7. Schließen Sie die TCP-Verbindung. (winkt viermal)
URL, Uniform Resource Locator, wird zum Auffinden von Ressourcen im Internet verwendet, allgemein bekannt als „URL“.
Die URL folgt den folgenden Syntaxregeln: scheme://host.domain:port/path/filename
Schema – definiert die Art des Internetdienstes. Die gängigen Protokolle sind http, https, ftp, file, wobei http der häufigste Typ ist und https für die verschlüsselte Netzwerkübertragung dient.
host – definiert den Domänenhost (Standardhost für http ist www).
domain – definiert den Internetdomänennamen, z. B. w3school.com.cn.
Port – definiert die Portnummer auf dem Host (Standard-Portnummer für http ist 80).
Pfad – definiert den Pfad auf dem Server (wenn weggelassen, muss sich das Dokument im Stammverzeichnis der Website befinden).
Dateiname – definiert den Namen des Dokuments/der Ressource.
1. Analysieren Sie die URL, suchen Sie den aktuellen URLDNS-Cache-Eintrag und vergleichen Sie, ob der Cache abgelaufen ist.
Zunächst wird die URL geparst, um das zu verwendende Übertragungsprotokoll und den Pfad der angeforderten Ressource zu analysieren. Wenn das Protokoll oder der Hostname in der eingegebenen URL ungültig ist, wird der in die Adressleiste eingegebene Inhalt an die Suchmaschine weitergeleitet. Wenn kein Problem vorliegt, prüft der Browser, ob die URL illegale Zeichen enthält. Wenn illegale Zeichen vorhanden sind, maskieren Sie die illegalen Zeichen, bevor Sie mit dem nächsten Vorgang fortfahren.
Zeichen wie /?: wurden von der URL als Sonderbedeutungen verstanden, sodass diese Zeichen nicht zufällig erscheinen können.
Wenn diese Sonderzeichen beispielsweise in einem Parameter erforderlich sind, müssen die Sonderzeichen zuerst maskiert werden.
Escape-Regeln: Konvertieren Sie das zu transkodierende Zeichen in Hexadezimalzahl und nehmen Sie dann von rechts nach links 4 Ziffern (weniger als 4 Ziffern und verarbeiten Sie sie direkt), erstellen Sie eine Ziffer für jeweils 2 Ziffern, fügen Sie % vor und kodieren Sie es als % XY-Format.
HSTS ist die Abkürzung für HTTP Strict Transport Security (HTTP Strict Transport Security). Dabei handelt es sich um eine Methode, mit der Websites erklären, dass der Zugriff nur über eine sichere Verbindung (HTTPS) möglich ist. Wenn eine Website eine HSTS-Richtlinie deklariert, muss der Browser alle HTTP-Verbindungen ablehnen und Benutzer daran hindern, unsichere SSL-Zertifikate zu akzeptieren. Die meisten gängigen Browser unterstützen derzeit HSTS.
Der Browser führt auch einige zusätzliche Vorgänge durch, wie z. B. Sicherheitsüberprüfungen, Zugriffsbeschränkungen usw.
Browser-Check-Cache:
2. Analyse des DNS-Domänennamens, um die entsprechende IP zu erhalten.
Vorausgesetzt, dass die eingegebene URL einen Domänennamen enthält, handelt es sich auf jeden Fall um eine DNS-Auflösung. Wenn die URL nur eine IP wäre, wäre DNS natürlich nicht beteiligt. Das Erscheinen des Domänennamens dient der besseren Erinnerung, da der Domänenname leichter zu merken ist als die IP. Wir gehen hier davon aus, dass die URL den Domainnamen enthält. Die Auflösung von DNS-Domänennamen verwendet eine rekursive Abfragemethode.
- Browser-Cache:
Zunächst prüft es, ob sich im eigenen Browser-Cache eine IP-Adresse befindet, die dem Domänennamen entspricht (sofern der Domänenname bereits zuvor besucht wurde und der Cache nicht geleert wurde).
- Systemcache:
Wenn im Browser-Cache keine IP vorhanden ist, die dem Domänennamen entspricht, wird automatisch überprüft, ob der DNS-Cache der Hosts-Datei des Computersystems des Benutzers die IP enthält, die dem Domänennamen entspricht. Dies ist jedoch der Domänenname auf Betriebssystemebene Das Auflösungsverfahren wird auch von vielen Hackern verwendet. Durch Ändern Ihrer Hosts-Datei löst der Inhalt des Domänennamens den spezifischen Domänennamen in die von ihm angegebene IP-Adresse auf, was zum sogenannten Domänennamen-Hijacking führt. Stellen Sie daher die Hosts-Datei in Windows 7 auf schreibgeschützt ein, um böswillige Manipulationen zu verhindern.
- Router-Cache:
Wenn weder der Browser noch der Systemcache es finden können, wird es zur Überprüfung in den Router-Cache eingegeben. Die oben genannten drei Schritte sind der DNS-Cache des Kundendienstes.
- DNS-Cache des ISP (Internet Service Provider):
Wenn die dem Domänennamen entsprechende IP-Adresse auf der Kundendienstseite des Benutzers nicht gefunden werden kann, wird sie zur Abfrage in den DNS-Cache des ISP eingegeben. Wenn Sie beispielsweise das Telekommunikationsnetzwerk verwenden, geben Sie für die Suche den DNS-Cache-Server der Telekommunikation ein;
- Root-Nameserver
Wenn keiner der oben genannten Schritte abgeschlossen ist, geben Sie den Stammserver für die Abfrage ein. Es gibt weltweit nur 13 Root-Domain-Nameserver, 1 Haupt-Root-Domain-Nameserver und die restlichen 12 sind zusätzliche Root-Domain-Nameserver. Nachdem der Stammdomänenname die Anfrage erhalten hat, überprüft er die Zonendateieinträge. Wenn kein Eintrag vorhanden ist, teilt er dem lokalen DNS-Server die Server-IP des Top-Level-Domänennamens (z. B. .com) in seinem Zuständigkeitsbereich mit ;
- TLD-Server
Nach Erhalt der Anfrage überprüft der Top-Level-Domain-Name-Server die Zonendateieinträge. Wenn kein Eintrag vorhanden ist, informiert er den lokalen DNS-Server über die IP-Adresse des primären Domain-Name-Servers in seinem Zuständigkeitsbereich.
- primärer Nameserver
Nach Erhalt der Anforderung fragt der primäre Domänennamenserver seinen eigenen Cache ab. Wenn nicht, gibt er den Domänennamenserver der nächsten Ebene zur Suche ein und wiederholt diesen Schritt, bis der richtige Datensatz gefunden wird.
- Ergebnis im Cache speichern
Der lokale Domänennamenserver speichert das zurückgegebene Ergebnis für die nächste Verwendung im Cache und gibt das Ergebnis an den Client zurück, und der Client kommuniziert über diese IP-Adresse mit dem Webserver
Geben Sie schließlich die gefundene IP an den Benutzer zurück und speichern Sie sie lokal für die nächste Verwendung. Darüber hinaus ist es zeitaufwändig, die Auflösung von DNS zu kennen. Wenn daher zu viele Domänennamen zur Auflösung vorhanden sind, verringert sich die Ladegeschwindigkeit des ersten Der Bildschirm wird vergrößert. Wird sehr langsam (ein Punkt, um die Geschwindigkeit des ersten Stapels zu optimieren). Ziehen Sie eine DNS-Prefetch-Optimierung in Betracht
3. Stellen Sie eine TCP-Verbindung basierend auf IP her. (Dreier-Handschlag)
TCP ist ein zuverlässiges verbindungsorientiertes Protokoll
. Der sogenannte Drei-Wege-Handshake bedeutet, dass beim Aufbau einer TCP-Verbindung der Client und der Server insgesamt 3 Pakete senden müssen.
Der Zweck des Drei-Wege-Handshakes besteht darin, eine Verbindung zum angegebenen Port des Servers herzustellen, eine TCP-Verbindung herzustellen, die Seriennummern und Bestätigungsnummern beider Parteien zu synchronisieren und Informationen zur TCP-Fenstergröße auszutauschen. Bei der Socket-Programmierung, wenn der Client connect() ausführt. Es wird ein Drei-Wege-Handshake ausgelöst.
Beim ersten Handshake sendet der Client ein TCP-SYN=1-Paket (synchroner Verbindungsaufbau), das den Port des Servers angibt, mit dem der Client eine Verbindung herstellen möchte, und generiert zufällig ein Datenpaket mit der Sequenznummer=1234567 an den Server. Danach Beim Senden wechselt der Client in den SYN_SEND-Status.
Der zweite Handshake: Nach Erhalt der Anfrage muss der Server die Online-Informationen bestätigen, syn = 1, ack = 1 (Bestätigungsbestätigung), ack number = (seq + 1 von Host A) an A senden und zufällig ein Paket generieren von seq=7654321; Nach dem Senden wechselt der Server in den SYN_RCVD-Status
Nach dem Empfang des dritten Handshakes prüft der Client, ob die Bestätigungsnummer korrekt ist, dh die zum ersten Mal gesendete Folgenummer + 1, und ob die Bitcode-Bestätigung 1 ist. Wenn sie korrekt ist, sendet Host A eine Bestätigungsnummer =(seq von Host B +1), ack=1, Host B bestätigt den seq-Wert und ack=1 nach dem Empfang, dann wird die Verbindung erfolgreich hergestellt.
Nachdem der Client gesendet hat, wechselt er in den Status ESTABLISHED. Wenn der Server die Paketbestätigung empfängt, wechselt er ebenfalls in den Status ESTABLISHED und der TCP-Handshake endet.
Warum kann ich keine Verbindung mit zwei Handshakes herstellen?
Der 3-Wege-Handshake erfüllt zwei wichtige Funktionen. Er erfordert nicht nur, dass sich beide Parteien auf das Senden von Daten vorbereiten, sondern ermöglicht beiden Parteien auch, die anfängliche Seriennummer auszuhandeln, die während des Handshake-Prozesses gesendet und bestätigt wird.
Wenn der Drei-Wege-Handshake auf nur zwei Handshakes geändert wird, ist ein Deadlock möglich. Wie in der folgenden Abbildung dargestellt, wird bei einer Kommunikation zwischen dem Computer-Client und dem Server davon ausgegangen, dass der Client ein Verbindungsanforderungspaket an den Server sendet und der Server das Paket empfängt und ein Bestätigungsantwortpaket sendet. Gemäß der Vereinbarung der beiden Handshakes geht der Server davon aus, dass die Verbindung erfolgreich hergestellt wurde und kann mit dem Senden von Datenpaketen beginnen. Wenn jedoch das Antwortpaket des Servers während der Übertragung verloren geht, weiß der Client nicht, ob der Server bereit ist oder welche Seriennummer der Server eingerichtet hat, und der Client zweifelt sogar daran, ob der Server sein eigenes Verbindungsanforderungspaket empfangen hat . In diesem Fall geht der Client davon aus, dass die Verbindung nicht erfolgreich hergestellt wurde, ignoriert alle vom Server gesendeten Datenpakete und wartet nur auf das Antwortpaket zur Verbindungsbestätigung. Nach einer Zeitüberschreitung des vom Server gesendeten Datenpakets sendet der Server jedoch wiederholt dasselbe Datenpaket. Dies führt zu einer Sackgasse.
Die anderen drei Handshakes können verhindern, dass das ungültige Verbindungsanforderungssegment plötzlich an den Server übertragen wird und so einen Fehler verursacht. Angenommen, es liegt eine abnormale Situation vor, das heißt, das erste vom Client gesendete Verbindungsanforderungssegment geht nicht verloren, sondern verbleibt lange Zeit in einigen Netzwerkknoten und wird bis zu einer bestimmten Zeit nach dem Freigeben der Verbindung verzögert, bevor es erreicht wird Es stellt sich heraus, dass es sich hierbei um ein Segment handelt, das bereits abgelaufen ist. Nach Erhalt des ungültigen Verbindungsanforderungssegments geht der Server jedoch fälschlicherweise davon aus, dass der Client eine neue Verbindungsanforderung gesendet hat, und sendet daher ein Bestätigungssegment an den Client, in dem er dem Verbindungsaufbau zustimmt. Unter der Annahme, dass der Drei-Wege-Handshake nicht verwendet wird, wird, solange der Server eine Bestätigung sendet, eine neue Verbindung hergestellt und auf das Senden von Daten durch den Client gewartet, sodass viele Ressourcen des Servers vergeblich verschwendet werden.
Schichtverwaltung von TCP/IP
Die TCP/IP-Protokollsuite umfasst viele Protokolle, die in vier Schichten unterteilt sind: Anwendungsschicht, Transportschicht, Netzwerkschicht und Datenverbindungsschicht.
Anwendungsschicht: Enthält verschiedene allgemeine Anwendungsdienste wie FTP (File Transfer Protocol, Dateiübertragungsprotokoll), DNS, HTTP usw.
Transportschicht: Bietet Datenübertragung zwischen zwei Computern im Netzwerk, z. B. TCP und UDP.
Netzwerkschicht: Behandelt die im Netzwerk fließenden Datenpakete. Diese Schicht gibt den Übertragungsweg und den Pfad an, über den Datenpakete an den Computer der anderen Partei übertragen werden. Wie IP.
Datenverbindungsschicht: Verbindet den Hardwareteil des Netzwerks, einschließlich Hardwaregeräten wie Netzwerkkarten, Glasfasern usw.
4. Nachdem die Verbindung hergestellt wurde, wird eine HTTP-Anfrage initiiert.
Eine vollständige HTTP-Anfrage besteht aus drei Teilen: der Anforderungsstartzeile, dem Anforderungsheader und dem Anforderungstext
5. Der Server antwortet auf die HTTP-Anfrage und der Browser erhält eine Antwort.
Nach dem Empfang der vom Browser gesendeten HTTP-Anfrage kapselt der Server die empfangene HTTP-Nachricht in ein HTTP-Anforderungsobjekt und verarbeitet sie über verschiedene Webserver. Das verarbeitete Ergebnis wird als HTTP-Antwortobjekt zurückgegeben, das hauptsächlich den Status enthält. Es gibt drei Teile: Code, Antwortheader und Antwortnachricht.
Der Statuscode besteht hauptsächlich aus den folgenden Teilen
1xx: Anweisungen – Zeigt an, dass die Anfrage empfangen wurde und weiterhin verarbeitet wird.
2xx: Erfolg – Zeigt an, dass die Anfrage erfolgreich empfangen, verstanden und akzeptiert wurde.
3xx: Umleitung – Weitere Maßnahmen sind erforderlich, um die Anfrage abzuschließen.
4xx: Clientfehler – Die Anfrage weist Syntaxfehler auf oder die Anfrage kann nicht erfüllt werden.
5xx: Serverseitiger Fehler – Der Server konnte eine legitime Anfrage nicht erfüllen.
Der Antwortheader besteht hauptsächlich aus Cache-Steuerung, Verbindung, Datum, Pragma usw.
Der Antworttext besteht aus den vom Server an den Browser zurückgegebenen Informationen und besteht hauptsächlich aus HTML-, CSS-, JS- und Bilddateien.
6. Der Browser analysiert den HTML-Code und rendert die Seite.
Parsen und Herunterladen von JS, CSS und Bildern
1. HTML-Tags analysieren, um einen DOM-Baum zu erstellen
2. CSS analysieren, um einen CSSOM-Baum zu erstellen
3. DOM und CSSOM zusammenführen, um einen Reander-Baum zu generieren
4. Layout des Reader-Baums, Berechnen der Position und Größe jedes Knotens
5. Rendern, Präsentieren die Seite
Dieser Vorgang kann ein Neuzeichnen oder Umfließen der Seite auslösen. Dabei spielen zwei wichtige Konzepte eine Rolle: Reflow und Repaint.
Reflow, auch als Layout bekannt, wird auf Chinesisch als Reflow bezeichnet, was im Allgemeinen bedeutet, dass sich der Inhalt, die Struktur, die Position oder die Größe des Elements geändert hat und der Stil und der Rendering-Baum neu berechnet werden müssen. Dieser Vorgang wird als Reflow bezeichnet.
Neu streichen, neu streichen bedeutet, dass sich die Änderung des Elements nur auf ein bestimmtes Erscheinungsbild des Elements auswirkt (z. B. Hintergrundfarbe, Rahmenfarbe, Textfarbe usw.).
Die Kosten für das Neuzeichnen und Neufließen bestehen darin, dass die Karte langsamer wird, der Browser jedoch über eine eigene Optimierung verfügt. Er unterhält eine Warteschlange und stellt alle Vorgänge, die ein Neuzeichnen und Neufließen verursachen, in diese Warteschlange. Wenn die Warteschlange eine bestimmte Anzahl erreicht oder erreicht Nach einer bestimmten Zeit leert der Browser die Warteschlange und führt einen Batch-Prozess aus, der mehrere Neuzeichnungs-Reflows zu einem Neuzeichnungs-Reflow zusammenfügt
Optimierung:
- Ändern Sie den Klassennamen direkt
- display: none Stellen Sie das Element zuerst auf display: none ein, bearbeiten Sie dann das Element und setzen Sie dann das Element auf display: block, nachdem der Vorgang abgeschlossen ist, sodass nur zwei Neuzeichnungen und Reflows ausgelöst werden
- Verwenden Sie replaceChild, um den zu ändernden Dom direkt zu ersetzen und den Fluss nur einmal neu zu zeichnen
- Setzen Sie Elemente, die mehrere Reflows erfordern, auf position:absolute/fixed, um sie aus dem Dokumentfluss zu entfernen
- Erstellen SieDocumentFragment, erstellen Sie einen virtuellen Knoten und fügen Sie ihn gleichzeitig hinzu
7. Der Server schließt die TCP-Verbindung.
TCP winkte viermal, um die TCP-Verbindung zu schließen
Die erste Welle (FIN=1, seq=x): Unter der Annahme, dass der Client die Verbindung schließen möchte, sendet der Client ein FIN=1-Paket, das angibt, dass er keine Daten zum Senden hat, aber dennoch Daten akzeptieren kann. Nach dem Senden wechselt der Client in den Status FIN_WAIT_1. (Die erste Welle: vom Browser initiiert, an den Server gesendet, meine Anforderungsnachricht wurde gesendet, Sie können schließen)
Die zweite Welle (ACK=1, ACKnum=x+1): Der Server bestätigt das FIN-Paket des Clients und sendet ein Bestätigungspaket, das angibt, dass er die Anfrage des Clients zum Schließen der Verbindung angenommen hat, aber nicht bereit ist, die Verbindung zu schließen . Nach dem Senden wechselt der Server in den
Status CLOSE_WAIT. Nach Erhalt des Bestätigungspakets wechselt der Client in den Status FIN_WAIT_2 und wartet darauf, dass der Server die Verbindung schließt. (Zweites Winken: Vom Server initiiert, teilen Sie dem Browser mit, dass ich die Anforderungsnachricht nicht mehr akzeptiert habe, und ich werde sie schließen, also sollten Sie das auch tun)
Die dritte Welle (FIN=1, seq=y): Wenn der Server bereit ist, die Verbindung zu schließen, sendet er eine Verbindungsbeendigungsanforderung an den Client und FIN wird auf 1 gesetzt. Nach dem Senden wechselt der Server in den LAST_ACK-Status und wartet auf die letzte ACK vom Client. (Die dritte Welle: Wird vom Server initiiert und teilt dem Browser mit, dass ich mit dem Senden der Antwortnachricht fertig bin und Sie zum Schließen bereit sind.)
Die vierte Welle (ACK=1, ACKnum=y+1): Der Client empfängt eine Schließanforderung vom Server, sendet ein Bestätigungspaket und wechselt in den TIME_WAIT-Status und wartet auf mögliche ACK-Pakete, die eine erneute Übertragung erfordern. Nach Erhalt des Bestätigungspakets schließt der Server die Verbindung und wechselt in den Status CLOSED. Nach einer bestimmten festen Zeit (zwei maximale Segmentlebenszyklen, 2MSL, 2 maximale Segmentlebenszeit) erhält der Client die Bestätigung nicht vom Server und geht davon aus, dass der Server die Verbindung normal geschlossen hat, und schließt daher die Verbindung selbst und gelangt in den GESCHLOSSEN-Zustand. (Die vierte Welle: Vom Browser initiiert, teilen Sie dem Server mit, dass ich die Antwortnachricht nicht mehr erhalten habe, und ich werde sie schließen, also sollten Sie es auch tun)
Warum gibt es beim Herstellen einer Verbindung einen Drei-Wege-Handschlag, aber vier winkende Hände?
Beim Herstellen einer Verbindung: Nachdem die Serverseite die SYN-Verbindungsanforderungsnachricht von der Clientseite erhalten hat, kann sie direkt eine SYN + ACK-Nachricht senden. Dabei wird die ACK-Nachricht zur Antwort und die SYN-Nachricht zur Synchronisierung verwendet.
Beim Schließen der Verbindung: Wenn der Server die FIN-Nachricht empfängt und TCP im Systemkernel implementiert ist, antwortet er automatisch mit ACK. Wenn Sie FIN erneut senden, ruft das Anwendungsprogramm close () manuell auf, um die Verbindung zu schließen. Bevor das Programm die Verbindung schließt, muss es möglicherweise Voroperationen wie die Freigabe von Ressourcen durchführen, sodass die Zusammenführung nicht zweimal durchgeführt werden kann und viermal gewinkt werden muss, wenn die Verbindung getrennt wird.