Wie funktioniert eine Website

Einführung

Wir haben schon besprochen, So funktioniert das Internet. Jetzt zeigen wir dem Endbenutzer über das Internet unsere Websites an. Es ist sehr wichtig zu wissen, wie eine Website in einen Browser geladen wird. Dies hilft Ihnen nicht nur, bessere Codes zu schreiben, sondern hilft Ihnen auch, Ihren Code effizient zu debuggen. Um zu verstehen, wie eine Website funktioniert, besprechen wir das Client-Server-Konzept, Website-Komponentendateien, die Funktionsweise des Browsers und den DOM-Baum.

Client und Server

Es gibt zwei Arten von Computern, die mit dem Internet verbunden sind, die als Clients und Server bezeichnet werden. Ein vereinfachtes Diagramm, wie ein Server und ein Client miteinander kommunizieren, ist unten dargestellt:

Client und Server

  • Server sind Geräte, die direkt mit dem Internet verbunden sind und zum Speichern von Webseiten, Sites, Apps und Dateien verwendet werden. Wenn ein Benutzer eine Website öffnet, wird sie von diesen Servern heruntergeladen.
  • Clients sind die Geräte, die von einem Benutzer verwendet werden, dh unsere PCs, Mobiltelefone, Tablets usw. Auf diesen Geräten ist eine Webbrowser-Software vorinstalliert (dh Browser wie Chrome oder Firefox).

Website-Komponentendateien

Eine Website besteht aus verschiedenen Dateitypen. Diese Dateien können in zwei Abschnitte unterteilt werden:

  • Codedateien: Alle Websites werden hauptsächlich aus HTML, CSS und JavaScript erstellt. Obwohl Sie vielleicht gesehen haben, dass andere Technologien an der Entwicklung von Websites beteiligt sind. Auch diese Dateien werden später gerendert und in diese Primärsprachen selbst konvertiert.
  • Details: Alle anderen Dinge, die eine Website abgesehen von primären Sprachdateien ausmachen, kommen in Assets, dh Bilder, Musik, Videos, PDFs usw.

So funktioniert der Browser

Die Hauptfunktionalität eines Browsers besteht darin, die von Ihnen gewählte Website darzustellen, indem sie vom jeweiligen Server angefordert und im Browser angezeigt wird. Im gegebenen Unterthema werden wir die Struktur und Funktionalität der wichtigsten Browser diskutieren, dh Chrome, Internet Explorer und Firefox.

Die allgemeine Struktur eines Browsers umfasst Folgendes:

  • Benutzeroberfläche: Alles, was Sie in einem Browser sehen können, dh Adressleiste, Schaltflächen, Anzeigefenster usw.
  • Rendering-Engine: Es analysiert HTML, XML, CSS usw.; und zeigt den Inhalt entsprechend auf dem Bildschirm an.
  • Netzwerk: Es führt alle Netzwerkaufruf-Anfragen durch, zB HTTP-Anfragen.
  • JavaScript-Interpreter: Er analysiert und führt die JavaScript-Codes aus.
  • Datenspeicherung: Jeder Browser unterstützt die Datenspeicherung der Persistenzschicht. Das heißt, Sie können Ihre Daten lokal im Browser als Cache speichern und sie werden nie gelöscht, bis der Browser-Cache gelöscht ist. Wir werden diese Browserfunktion später auch in unseren Codes verwenden.

So funktioniert der Browser

Abgesehen von den oben genannten Komponenten gibt es andere Komponenten, die für diesen Artikel nicht relevant sind.

Der DOM-Baum

DOM ist eine plattformübergreifende Programmierschnittstelle, die HTML, XML und andere Auszeichnungssprachen in Form einer Baumstruktur behandelt. In einem DOM wird jedes Tag/Element durch einen einzelnen Knoten repräsentiert. Jeder Browser verwendet eine DOM-Struktur, um eine Webseite anzuzeigen.

Sobald der Browser den Inhalt einer Webseite vom Server erhält, parst er das XML in HTML und konvertiert später das HTML-Element in DOM-Knoten in einem Baum namens „Inhaltsbaum“. Dann wird das CSS geparst und in einen Baum namens „Renderbaum“ umgewandelt. Die Knoten dieser Bäume werden später entsprechend ihrer Koordinaten auf dem Bildschirm angezeigt. Ein allgemeines Beispiel ist unten gezeigt:

Der DOM-Baum

Abbildung 1 HTML-DOM-Baumdiagramm

Wie funktioniert eine Website

Der Lernpunkt hier ist, dass jeder Code, den Sie für das Frontend schreiben, in die grundlegenden Sprachen konvertiert wird, dh HTML, CSS und JavaScript. Und das HTML und CSS werden in eine DOM-Baumstruktur umgewandelt und dann entsprechend im Browserfenster angezeigt.

 

Hinterlassen Sie eine Nachricht

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.