Was ist der vollständige Prozess von der Eingabe einer url auf der Adressleiste des Browsers, um die gerenderte Seite in den browser?
Ich denke über diese Frage für eine lange Zeit. Es ist ein großen Frage, denn es deckt nahezu alle Ecken Bezug auf web-Entwicklung.
In meinem Verständnis, sollte der Vorgang so sein:
- geben Sie die url der Adressleiste
- eine Anfrage an den DNS-server auf Ihrem Netzwerk-Konfiguration
- DNS route, die Sie an die Reale IP des domain name
- eine Anfrage mit vollständigen Http-header) wird an den server geschickt werden(mit 3 s IP zu identifizieren)'s port 80(nehme an, dass wir nicht einen anderen port angeben)
- server sucht die listening-ports und weiterleiten der Anforderung an die app, die das hören auf port 80(sagen wir mal nginx hier) oder auf einen anderen server(dann 3 server wird wie ein load balancer)
- nginx wird versuchen, die url zu seiner Konfiguration und dienen als statische Seite direkt, oder rufen Sie das entsprechende Skript intepreter(e.g PHP/Python) oder eine andere app, um dynamische Inhalte(mit DB-Abfrage, oder andere logics)
- eine html zurückgeschickt browser mit einem kompletten Http-Antwort-header
- browser Parsen DOM von html mit seinen parser
- externe Ressourcen(JS/CSS/images/flash/videos..) beantragt werden in der Folge(oder nicht?)
- für JS, es wird durchgeführt von JS-engine
- für CSS, es wird gerendert, indem die CSS-engine und HTML-anzeigen werden angepasst basierend auf dem CSS(auch in der Folge, oder nicht?)
- wenn es ein iframe in den DOM, dann eine separate gleichen Prozess ausgeführt werden, von Schritt 1-12
Oben ist mein Verständnis, aber ich weiß nicht, ob es richtig oder nicht? Wie viel genau? Hab ich was verpasst?
Wenn es richtig(oder fast richtig), hoffe ich:
- Den Schritt die Beschreibung genauer in deinen Worten, oder schreiben Sie Ihre Schritte, wenn es eine große Veränderung
- Eine Tiefe Erklärung für jeden Schritt, der Sie am besten vertraut sind.
- Eine Antwort pro Schritt. Andere können machen, ergänzen in jeder Antwort Kommentar.
Und ich hoffe dieser thread kann helfen, alle web-Entwickler, um ein besseres Verständnis über das, was wir jeden Tag tun.
Und werde ich auf dieser Frage basiert auf den Antworten.
Dank.
- vladstudio.com/de/wallpaper/?how_internet_works/800x600/low 😉 Gute Frage. +1
- Related: Wie ASP.NET Web-Seiten Verarbeitet Web-Server - 4guysfromrolla.com/articles/011404-1.aspx
- +1 Diese Frage wurde gebeten, mich in vielen interviews. Schön, Sie hier zu finden. Es wäre toll, um diese Frage als Ausgangspunkt und Folgen Sie den links von hier, um weitere Fragen zu erklären, die feineren details der beteiligten Schritte. Gute Arbeit...
- stackoverflow.com/q/2092527/351903 enthält einige schöne Antworten für einige Punkte mehr
- Das ist eine gute Erklärung:medium.com/@maneesha.wijesinghe1/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wie Sie sagen, das ist eine umfassende Frage, wo es möglich ist, ins detail gehen auf eine Reihe von Themen. Es ist nichts falsch mit der Sequenz, die Sie beschrieben, aber Sie gehen aus, viele Details. Um einige zu erwähnen:
Jedes dieser Themen, und viele mehr, die ausführlich diskutiert werden konnten. Vielleicht ist es praktischer, mehr zu Fragen, spezifische Fragen zu Themen, die Sie interessiert?
war ich auch auf der Suche für die gleiche Sache und fand diese genial ausführliche Antwort wird gemeinsam gebaut bei github
Kann ich beschreiben, einen Punkt hier -
Bestimmen, welche Datei/Ressource ausführen, die Sprache-interpreter zu laden.
Mir verzeihen, wenn ich falsch bin in über Dolmetscher hier. Es können auch andere Fehler in meiner Antwort, ich werde versuchen, diese zu korrigieren später und enthalten die entsprechenden technischen Begriffe für die Dinge.
Wenn der Webserver (z.B. apache) erhielt die URI prüft Sie, ob es irgendwelche vorhandenen rewrite-Regel passt es. In diesem Fall ist der URI umgeschrieben genommen wird. In jedem Fall, wenn es keine Datei-Namen, um das Ende der URI, die default-Datei geladen, die in der Regel index.html oder index.php etc. Nach der Erweiterung des Datei-Namen, die entsprechende apache-Modul für server-seitige Programmiersprache, support geladen wird, z.B. mod_php für PHP, mod_python im Fall von python. Das entsprechende server-side-Sprache-interpreter (unter Berücksichtigung interpretierten Sprachen wie PHP), dann bereitet die endgültige HTML-oder Ausgabe in einer anderen form für den web-server, die schließlich sendet diese als HTTP-Antwort.
Browser initiiert eine TCP-Verbindung mit dem server.Es verwendet eine drei-Wege-handshake
Client-Rechner sendet ein SYN-Paket an den server über das internet gefragt werden, ob es offen ist für neue verbindungen.
Wenn der server hat offene ports akzeptieren kann, und initiieren Sie neue verbindungen, es werde reagieren mit einer Bestätigung des SYN-Paket mit einem SYN/ACK-Paket.
Erhält der client das SYN/ACK-Paket vom server und bestätigen Sie es durch senden eines ACK-Pakets.
Dann eine TCP-Verbindung für die Datenübertragung!
Parsing - HTML, CSS, JS
Rendering - Konstruieren DOM-Baum → Render Tree → Layout Render Tree → Malerei der render-Baum