Wenn Sie eine Seite in einem Webbrowser durchsuchen oder öffnen, sehen Sie im Wesentlichen das interpretierte Ergebnis mehrerer Prozesse, die zusammenarbeiten. Hier ist eine Aufschlüsselung dessen, was passiert und was Sie am Ende sehen:
1. Die Anfrage:
* Sie geben eine URL ein: Sie geben eine Webadresse (wie `www.example.com`) in die Adressleiste ein oder klicken auf einen Link.
* Der Browser sendet eine Anfrage: Der Browser verwendet die URL, um die Adresse des Servers zu bestimmen (bei Bedarf über DNS -Lookups) und sendet eine HTTP -Anforderung an diesen Server. In dieser Anfrage wird nach bestimmten Ressourcen aufgefragt, die meistens die HTML -Datei, die die Webseite darstellt. Es enthält auch Informationen wie Ihren Browsertyp, Spracheinstellungen und Cookies.
2. Die Antwort des Servers:
* Serververarbeitung: Der Server empfängt die Anforderung. Es verarbeitet es, das möglicherweise das Abrufen von Daten aus einer Datenbank, das Ausführen von serverseitigen Skripten (wie PHP, Python, Node.js) oder einfach die angeforderte Datei in seinem Speicher ausführen.
* Server sendet eine Antwort: Der Server sendet eine HTTP -Antwort zurück. Diese Antwort enthält:
* HTTP -Header: Metadaten über die Antwort (z. B. Inhaltstyp, Caching -Anweisungen, Statuscode wie 200 OK oder 404 nicht gefunden).
* der Antwortkörper: Der tatsächliche Inhalt der Antwort, der höchstwahrscheinlich ist:
* html (Hypertext Markup -Sprache): Die Struktur und der Inhalt der Webseite. Dies definiert die Überschriften, Absätze, Links, Bilder usw.
* CSS (Cascading -Stilblätter): Die Stilregeln für die Anzeige der HTML -Elemente (Farben, Schriftarten, Layout usw.). CSS können in die HTML eingebettet werden, in separaten CSS -Dateien enthalten oder mit externen CSS -Dateien verknüpft werden.
* JavaScript: Code, der der Webseite Interaktivität und dynamisches Verhalten hinzufügt (Animationen, Formularvalidierung, AJAX -Anforderungen usw.). Wie CSS kann JavaScript eingebettet, in separate Dateien oder extern verknüpft werden.
* Andere Ressourcen: Bilder (JPEG, PNG, GIF, SVG), Videos, Audiodateien, Schriftarten usw., auf die HTML, CSS oder JavaScript verwiesen.
3. Das Rendering des Browsers (was Sie tatsächlich sehen):
* Parsen: Der Browser * pariert * die HTML. Es liest den HTML -Code und erstellt ein *Dokumentobjektmodell (DOM) *. Das DOM ist eine baumartige Darstellung der HTML-Struktur im Gedächtnis.
* CSSOM -Konstruktion: Das Browser analysiert CSS und baut ein *CSS -Objektmodell (CSSOM) *auf. Dies stellt die auf die HTML -Elemente angewendeten Stilregeln dar.
* Rendering Motor: Dies ist das Herzstück des Anzeigeprozesses des Browsers:
* kombiniert DOM und CSSOM: Der Browser kombiniert DOM und CSSOM, um einen *Renderbaum *zu erstellen. Dieser Baum enthält nur die sichtbaren Elemente und ihre Stile.
* Layout (Reflow): Der Browser berechnet die Größe und Position jedes Elements im Renderbaum. Dies ist als *Layout *oder *Reflow *bekannt.
* Malerei (Repaint): Der Browser * malt * jedes Element auf dem Bildschirm gemäß seinem berechneten Layout und Stilen. Dies beinhaltet das Zeichnen von Text, Farben, Bildern, Rändern usw.
* JavaScript -Ausführung: Die JavaScript -Engine des Browsers (z. B. V8 für Chrome, Spiderermonkey for Firefox) führt den JavaScript -Code aus. Dieser Code kann:
* Ändern Sie die DOM:Fügen Sie HTML -Elemente hinzu, entfernen oder ändern.
* CSS ändern:Ändern Sie die Elementstile.
* Machen Sie AJAX -Anforderungen:Holen Sie sich zusätzliche Daten vom Server ab, ohne die gesamte Seite neu zu laden.
* Verwandte Benutzerereignisse:Antworten Sie auf Klicks, Tastatureingabe usw.
Also, was Sie letztendlich * sehen * ist das Ergebnis dieses komplexen Prozesses:
* Formatierter Text: Überschriften, Absätze, Listen usw. gemäß den CSS -Regeln.
* Bilder: An ihren angegebenen Stellen angezeigt.
* Links: Text oder Bilder, auf die Sie klicken können, um zu anderen Seiten zu navigieren.
* Interaktive Elemente: Schaltflächen, Formulare, Animationen und andere Elemente, die auf Ihre Aktionen reagieren.
* Das Gesamtlayout und visuelles Design: Die Organisation der Elemente auf der Seite, bestimmt von HTML, CSS und JavaScript.
Zusammenfassend:
Sie sehen eine visuell ansprechende und interaktive Darstellung des von einem Webservers gelieferten Inhalts, dank der Fähigkeit des Browsers, HTML, CSS und JavaScript zu analysieren und zu rendern. Es ist wie das Lesen eines Rezepts (HTML), zu verstehen, wie man die Zutaten (CSS) stylen und dann ein zusätzliches Flair mit einer speziellen Technik (JavaScript) hinzufügen, um ein köstliches Gericht (die Webseite) zu erstellen.
