{"id":14038,"date":"2023-02-22T13:00:19","date_gmt":"2023-02-22T12:00:19","guid":{"rendered":"https:\/\/blog.rwth-aachen.de\/itc\/?p=14038"},"modified":"2023-05-12T09:51:31","modified_gmt":"2023-05-12T07:51:31","slug":"wie-funktioniert-ein-browser","status":"publish","type":"post","link":"https:\/\/blog.rwth-aachen.de\/itc\/2023\/02\/22\/wie-funktioniert-ein-browser\/","title":{"rendered":"Wie funktioniert ein Browser?"},"content":{"rendered":"<div class=\"twoclick_social_bookmarks_post_14038 social_share_privacy clearfix 1.6.4 locale-de_DE sprite-de_DE\"><\/div><div class=\"twoclick-js\"><script type=\"text\/javascript\">\/* <![CDATA[ *\/\njQuery(document).ready(function($){if($('.twoclick_social_bookmarks_post_14038')){$('.twoclick_social_bookmarks_post_14038').socialSharePrivacy({\"txt_help\":\"Wenn Sie diese Felder durch einen Klick aktivieren, werden Informationen an Facebook, Twitter, Flattr, Xing, t3n, LinkedIn, Pinterest oder Google eventuell ins Ausland \\u00fcbertragen und unter Umst\\u00e4nden auch dort gespeichert. N\\u00e4heres erfahren Sie durch einen Klick auf das <em>i<\\\/em>.\",\"settings_perma\":\"Dauerhaft aktivieren und Daten\\u00fcber-tragung zustimmen:\",\"info_link\":\"http:\\\/\\\/www.heise.de\\\/ct\\\/artikel\\\/2-Klicks-fuer-mehr-Datenschutz-1333879.html\",\"uri\":\"https:\\\/\\\/blog.rwth-aachen.de\\\/itc\\\/2023\\\/02\\\/22\\\/wie-funktioniert-ein-browser\\\/\",\"post_id\":14038,\"post_title_referrer_track\":\"Wie+funktioniert+ein+Browser%3F\",\"display_infobox\":\"on\"});}});\n\/* ]]> *\/<\/script><\/div><p><div id=\"attachment_14039\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"https:\/\/blog.rwth-aachen.de\/itc\/files\/2023\/02\/Webseiten.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-14039\" class=\"wp-image-14039 size-medium\" src=\"https:\/\/blog.rwth-aachen.de\/itc\/files\/2023\/02\/Webseiten-300x169.jpg\" alt=\"Abbildung des Prozesses wie ein Browser funktioniert in Form von Grafiken\" width=\"300\" height=\"169\" srcset=\"https:\/\/blog.rwth-aachen.de\/itc\/files\/2023\/02\/Webseiten-300x169.jpg 300w, https:\/\/blog.rwth-aachen.de\/itc\/files\/2023\/02\/Webseiten-768x432.jpg 768w, https:\/\/blog.rwth-aachen.de\/itc\/files\/2023\/02\/Webseiten.jpg 1003w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-14039\" class=\"wp-caption-text\">Quelle: Eigene Darstellung<\/p><\/div><\/p>\n<p>Heute nehmen wir euch mit auf eine Reise, die bei eurer Anfrage im Browser beginnt und bei der finalen Darstellung der Webseite aufh\u00f6rt.<br \/>\nWas passiert eigentlich im Hintergrund wenn ihr eine Webseite aufruft? Wie arbeitet ein Browser? Was ist ein DNS und was hat ein Port damit zu tun?<\/p>\n<p><em>\u00a0<\/em><strong><br \/>\n<\/strong><!--more--><\/p>\n<h3><span style=\"color: #00549f;\"><strong>Back to Basic<\/strong><\/span><\/h3>\n<p>Computer oder Prozessoren arbeiten mit einem bin\u00e4ren Zahlensystem und verstehen grunds\u00e4tzlich nur 0 und 1. Kombiniert man diese jedoch miteinander, werden daraus weitere Zahlen gebildet. So entstehen die sogenannten IP-Adressen, welche jedem Computer oder Ger\u00e4t mit Internetzugang zugeordnet werden. IP-Adressen sind wie eine Art Telefonnummer, die einer bestimmten Person zugeordnet ist. Die meisten von uns Menschen k\u00f6nnen sich besser W\u00f6rter oder S\u00e4tze anstatt Zahlen merken, weshalb auch Computer an vielen Stellen nicht mit Zahlen, sondern mit W\u00f6rtern arbeiten. Normalerweise m\u00fcssten wir in die URL-Zeile eines Browsers die IP-Adresse eines Webservers eingeben, um diesen zu erreichen und die Webseite zu \u00f6ffnen. Damit wir das nicht tun m\u00fcssen, gibt es das DNS.<\/p>\n<h3><span style=\"color: #00549f;\"><strong>Das DNS \u2013 Domain Name System <\/strong><\/span><\/h3>\n<p>Damit wir einfach W\u00f6rter in den Browser eingeben k\u00f6nnen, gibt es das sogenannte DNS (Domain Name System). Das DNS agiert in diesem Moment als \u00dcbersetzer, welcher IP-Adressen in W\u00f6rter, genauer genommen die Domain umwandelt. Dies funktioniert genauso umgekehrt. Die Domains k\u00f6nnen also auch in IP-Adressen umgewandelt werden. Ihr k\u00f6nnt euch das DNS aber auch als ein riesengro\u00dfes Telefonbuch vorstellen. Wird eine Anfrage f\u00fcr eine Domain gestellt, wird in dem Telefonbuch nachgeschlagen, wie die IP-Adresse des Servers lautet, auf dem die Webseite gespeichert ist.<\/p>\n<h3><span style=\"color: #00549f;\"><strong>Doch wie funktioniert denn jetzt ein Browser?<\/strong><\/span><\/h3>\n<p>Stellt euch nun mit diesem Hintergrundwissen vor, ihr sitzt vor eurem Computer und tippt eine Domain\u00a0in die URL-Zeile eures Browsers ein.<\/p>\n<h3><strong><span style=\"color: #00549f;\">Was macht euer Browser nun?<\/span><br \/>\n<\/strong><\/h3>\n<p>Er stellt eine Anfrage an einen DNS-Server. Euer Browser wei\u00df n\u00e4mlich auf Anhieb nicht, auf welchem Server die Webseite verf\u00fcgbar ist. Was der Browser aber kennt, ist die Adresse des DNS-Servers. Diesen DNS-Server fragt er jetzt: Welchen Webserver muss ich ansprechen, um die entsprechende Webseite zu finden. Der DNS-Server sucht nun in seiner riesengro\u00dfen Datenbank und liefert dem Browser eine IP-Adresse.<\/p>\n<p>Im n\u00e4chsten Schritt stellt euer Browser basierend auf der IP-Adresse, die er erhalten hat, eine neue Anfrage an den Webserver. Diese erg\u00e4nzt er aber um einen Port. In diesem Fall ist das der Port 443. Durch den Port 443 wei\u00df der Webserver, dass es sich um eine sogenannte \u201ehttps\u201c-Anfrage handelt.<\/p>\n<h3><span style=\"color: #00549f;\"><strong>Die richtigen Ports und Quellcodes<\/strong><\/span><\/h3>\n<p>Ihr alle kennt \u201ehttps\u201c aus der URL. Bei \u201ehttps\u201c handelt es sich um ein Protokoll zur Darstellung von Webseiten. Ports k\u00f6nnt ihr euch vorstellen wie Postk\u00e4sten in einem Mehrfamilienhaus. Wie jeder Haushalt seinen eigenen Briefkasten hat, so hat auch jedes Protokoll seinen eigenen Port. Port ist ein Begriff aus dem Englischen und hei\u00dft auf Deutsch Anschluss oder Durchlass. \u00dcber einen Port gelangen Informationen von eurem Computer ins Internet oder vom Internet wieder an euren Computer zur\u00fcck.<\/p>\n<p>Alle Webseiten kommunizieren mit dem Internet, um Ihnen die Inhalte anzeigen zu k\u00f6nnen. Sie bekommen also von dem Internet verschiedene Daten an Ihren Computer gesendet. Durch die Ports wei\u00df der Computer, welche Daten zu welcher Anwendung, also Webseite geh\u00f6rt.<\/p>\n<p>Jeder Port hat eine andere Nummer. Die Daten, die vom Internet bei eurem Computer ankommen, enthalten also alle eine Portnummer. So wird der Port 443 f\u00fcr Anfragen f\u00fcr Webseiten verwendet. Wollen wir also die Webseite itc.rwth-aachen.de erreichen, senden wir die Anfrage \u00fcber Port 443. Die Anfrage hat das Ziel, dass die Webseite angezeigt wird. Wurde die Anfrage gestellt sucht der Webserver alle Informationen zusammen, um die Webseite anzeigen zu k\u00f6nnen. Er sucht nach Informationen, Bildern sowie Texten und baut damit einen Quellcode zusammen, welchen er anschlie\u00dfend an den Browser zur\u00fcckschickt.<\/p>\n<p>Der Browser erh\u00e4lt mit dem Quellcode aber erst mal nur eine Textdatei. In dieser stehen die Informationen, die er zum Anzeigen der Webseite braucht. Beispielsweise wie der Seitentitel lautet, ob ein PDF verlinkt ist oder die URL zu einem Bild.<\/p>\n<p>Der Browser f\u00e4ngt dann an, sich von oben nach unten durch den Quellcode zu arbeiten. Beim Durcharbeiten der Datei f\u00e4llt dem Browser beispielsweise auf, dass ihm eine Schriftart fehlt oder Bilder. Diese Ressourcen liegen aber auf anderen Webserver im Internet, sodass der Browser weitere DNS-Anfragen stellen muss. F\u00fcr jede einzelne Ressource werden weitere DNS-Anfragen gestellt. Das Spiel geht also von vorne los. Je nachdem wie viele Elemente die Webseite hat und der Browser sich diese Informationen zusammensuchen muss, desto l\u00e4nger ist die Ladezeit der Seite.<\/p>\n<h3><strong><span style=\"color: #00549f;\">Endlich \u2013 die fertige Seite<\/span><br \/>\n<\/strong><\/h3>\n<p>Parallel zum Abfragen dieser Daten auf anderen Servern f\u00e4ngt der Browser parallel an die Seite zu \u201erendern\u201c. Das bedeutet darzustellen. All das oben genannte geschieht \u00fcblicherweise innerhalb weniger Sekunden. Hat der Browser alle Informationen zusammen, wird die Seite final geladen und euch vollst\u00e4ndig angezeigt.<\/p>\n<p>Verantwortlich f\u00fcr die Inhalte dieses Beitrags ist <a href=\"https:\/\/www.itc.rwth-aachen.de\/cms\/it-center\/IT-Center\/Profil\/Team\/~epvp\/Mitarbeiter-CAMPUS-\/?gguid=0x592B0D17C73A1249AC2C233FADF6EE96&amp;allou=1\">Janin Vreydal<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Heute nehmen wir euch mit auf eine Reise, die bei eurer Anfrage im Browser beginnt und bei der finalen Darstellung der Webseite aufh\u00f6rt. Was passiert eigentlich im Hintergrund wenn ihr [&hellip;]<\/p>\n","protected":false},"author":3351,"featured_media":14039,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"c2c_always_allow_admin_comments":false,"footnotes":""},"categories":[305],"tags":[75,485,822,84],"class_list":["post-14038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themen","tag-browser","tag-dns","tag-we","tag-webseite"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/posts\/14038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/users\/3351"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/comments?post=14038"}],"version-history":[{"count":4,"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/posts\/14038\/revisions"}],"predecessor-version":[{"id":15446,"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/posts\/14038\/revisions\/15446"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/media\/14039"}],"wp:attachment":[{"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/media?parent=14038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/categories?post=14038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.rwth-aachen.de\/itc\/wp-json\/wp\/v2\/tags?post=14038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}