Wenn Sie eine URL eingeben, was passiert genau bei der Erstellung der Hintergrund-HTML-/Xhtml-Webseite?

Als Softwareentwickler müssen Sie über ein umfassendes hierarchisches Verständnis der Funktionsweise von Webanwendungen verfügen. Dazu gehören auch die von diesen Anwendungen verwendeten Technologien: Browser, HTTP, HTML, Webserver, Anforderungsverarbeitung und so weiter.

In diesem Artikel wird genauer untersucht, was im Hintergrund passiert, wenn Sie eine URL eingeben~

1. Zuerst müssen Sie die URL im Browser eingeben :

2. Der Browser sucht nach der IP-Adresse des Domainnamens

Der erste Schritt bei der Navigation besteht darin, die IP-Adresse des besuchten Domainnamens herauszufinden. Der DNS-Suchvorgang läuft wie folgt ab:

Browser-Cache – Browser speichern DNS-Einträge für einen bestimmten Zeitraum zwischen. Interessanterweise teilt das Betriebssystem dem Browser nicht mit, wie lange DNS-Einträge gespeichert werden sollen, daher speichern verschiedene Browser eine feste Zeit (zwischen 2 und 30 Minuten). Systemcache – Wenn der erforderliche Datensatz nicht im Browsercache gefunden wird, führt der Browser einen Systemaufruf durch (gethostbyname in Windows). Dadurch wird der Datensatz im Systemcache abgerufen. Router-Cache – Als nächstes wird die vorherige Abfrageanforderung an den Router gesendet, der normalerweise über einen eigenen DNS-Cache verfügt. ISP-DNS-Cache – Als nächstes müssen Sie den Server überprüfen, auf dem der ISP DNS zwischenspeichert. Die entsprechenden Cache-Records finden Sie in der Regel hier. Rekursive Suche – Die DNS-Server Ihres ISP führen eine rekursive Suche durch, beginnend mit den Nameservern, von den .com-Nameservern der obersten Ebene bis zu den Facebook-Nameservern. Im Allgemeinen enthält der Cache des DNS-Servers den Domänennamen im .com-Domänennamenserver, sodass der Zuordnungsprozess zum Server der obersten Ebene nicht erforderlich ist.

Die rekursive DNS-Suche ist in der folgenden Abbildung dargestellt:

Eine Sache, die bei DNS besorgniserregend ist, ist, dass ein ganzer Domainname wie wikipedia.org oder facebook.com scheinbar nur einer einzigen IP-Adresse entspricht. Glücklicherweise gibt es mehrere Möglichkeiten, diesen Engpass zu beseitigen:

Cycle DNS ist die Lösung, wenn während der DNS-Suche mehrere IPs zurückgegeben werden. Beispielsweise entspricht Facebook.com tatsächlich vier IP-Adressen. Ein Load Balancer ist ein Hardwaregerät, das eine bestimmte IP-Adresse abhört und Netzwerkanfragen an geclusterte Server weiterleitet. Einige große Websites verwenden im Allgemeinen diesen teuren, leistungsstarken Load Balancer. Geografisches DNS verbessert die Skalierbarkeit, indem Domänennamen basierend auf dem geografischen Standort des Benutzers mehreren verschiedenen IP-Adressen zugeordnet werden. Auf diese Weise können verschiedene Server den Synchronisierungsstatus nicht aktualisieren, aber es eignet sich hervorragend für die Zuordnung statischer Inhalte. Anycast ist eine Routing-Technologie, die eine IP-Adresse mehreren physischen Hosts zuordnet. Der Haken an der Sache ist, dass sich Anycast nicht gut an das TCP-Protokoll anpasst und daher in diesen Lösungen selten verwendet wird.

Die meisten DNS-Server verwenden Anycast für effiziente DNS-Suchen mit geringer Latenz.

3. Der Browser sendet eine HTTP-Anfrage an den Webserver

Da dynamische Seiten wie die Facebook-Startseite nach dem Öffnen schnell oder sogar sofort im Browser-Cache verfallen, besteht kein Zweifel daran, dass sie nicht daraus gelesen werden können.

Der Browser sendet also die folgende Anfrage an den Server, auf dem sich Facebook befindet:

GET http://facebook.com/ HTTP/1.1<br> Accept: application/x-ms-application, Wenn Sie eine URL eingeben, was passiert genau bei der Erstellung der Hintergrund-HTML-/Xhtml-Webseite?/jpeg, application/xaml+xml, [...]<br> User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]<br> Accept-Encoding: gzip, deflate<br> Connection: Keep-Alive<br> Host: facebook.com<br> Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

GET Diese Anfrage definiert die zu lesende URL: „http://facebook.com/“. Der Browser definiert sich selbst (Header User-Agent) und welche Art von Antwort er akzeptieren möchte (Header Accept und Accept-Encoding). Verbindung Der -Header fordert den Server auf, die TCP-Verbindung für nachfolgende Anfragen nicht zu schließen. Die

Anfrage enthält auch die vom Browser für diesen Domainnamen gespeicherten

Cookies. Wie Sie vielleicht bereits wissen, sind Cookies Schlüssel, die den Status einer Website zwischen Seitenaufrufen verfolgen. Auf diese Weise speichern Cookies den Login-Benutzernamen, das vom Server zugewiesene Passwort und einige Benutzereinstellungen. Cookies werden als Textdateien auf dem Client-Computer gespeichert und bei jeder Anfrage an den Server gesendet.

Es gibt viele Tools, mit denen sich die ursprünglichen HTTP-Anfragen und die entsprechenden Anfragen anzeigen lassen. Der Autor verwendet am liebsten Fiddler, aber natürlich gibt es auch andere Tools wie FireBug. Diese Software wird Ihnen bei der Optimierung Ihrer Website sehr helfen.

除了获取请求，还有一种是发送请求，它常在提交表单用到。发送请求通过URL传递其参数(e.g.: http://robozzle.com/puzzle.aspx?id=85)。发送请求在请求正文头之后发送其参数。

像“http://facebook.com/”中的斜杠是至关重要的。这种情况下，浏览器能安全的添加斜杠。而像“http: //example.com/folderOrFile”这样的地址，因为浏览器不清楚folderOrFile到底是文件夹还是文件，所以不能自动添加 斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，结果造成一次不必要的握手。 

4. facebook服务的永久重定向响应

图中所示为Facebook服务器发回给浏览器的响应：

HTTP/1.1 301 Moved Permanently<br> Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,<br> pre-check=0<br> Expires: Sat, 01 Jan 2000 00:00:00 GMT<br> Location: http://www.facebook.com/<br> P3P: CP="DSP LAW"<br> Pragma: no-cache<br> Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;<br> path=/; domain=.facebook.com; httponly<br> Content-Type: text/html; charset=utf-8<br> X-Cnection: close<br> Date: Fri, 12 Feb 2010 05:09:51 GMT<br> Content-Length: 0

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.facebook.com/” 而非“http://facebook.com/”。

为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？这个问题有好多有意思的答案。

其中一个原因跟搜索引擎排名有 关。你看，如果一个页面有两个地址，就像http://www.igoro.com/ 和http://igoro.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是 什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。

还有一个是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。

5. 浏览器跟踪重定向地址

现在，浏览器知道了“http://www.facebook.com/”才是要访问的正确地址，所以它会发送另一个获取请求：

GET http://www.facebook.com/ HTTP/1.1<br> Accept: application/x-ms-application, Wenn Sie eine URL eingeben, was passiert genau bei der Erstellung der Hintergrund-HTML-/Xhtml-Webseite?/jpeg, application/xaml+xml, [...]<br> Accept-Language: en-US<br> User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]<br> Accept-Encoding: gzip, deflate<br> Connection: Keep-Alive<br> Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]<br> Host: www.facebook.com

头信息以之前请求中的意义相同。

6. 服务器“处理”请求

服务器接收到获取请求，然后处理并返回一个响应。

这表面上看起来是一个顺向的任务，但其实这中间发生了很多有意思的东西- 就像作者博客这样简单的网站，何况像facebook那样访问量大的网站呢！

Web 服务器软件
web服务器软件（像IIS和阿帕奇）接收到HTTP请求，然后确定执行什么请求处理来处理它。请求处理就是一个能够读懂请求并且能生成HTML来进行响应的程序（像ASP.NET,PHP,RUBY...）。

举 个最简单的例子，需求处理可以以映射网站地址结构的文件层次存储。像http://example.com/folder1/page1.aspx这个地 址会映射/httpdocs/folder1/page1.aspx这个文件。web服务器软件可以设置成为地址人工的对应请求处理，这样 page1.aspx的发布地址就可以是http://example.com/folder1/page1。

请求处理
请求处理阅读请求及它的参数和cookies。它会读取也可能更新一些数据，并讲数据存储在服务器上。然后，需求处理会生成一个HTML响应。

所 有动态网站都面临一个有意思的难点 -如何存储数据。小网站一半都会有一个SQL数据库来存储数据，存储大量数据和/或访问量大的网站不得不找一些办法把数据库分配到多台机器上。解决方案 有：sharding （基于主键值讲数据表分散到多个数据库中），复制，利用弱语义一致性的简化数据库。

委 托工作给批处理是一个廉价保持数据更新的技术。举例来讲，Fackbook得及时更新新闻feed，但数据支持下的“你可能认识的人”功能只需要每晚更新 （作者猜测是这样的，改功能如何完善不得而知）。批处理作业更新会导致一些不太重要的数据陈旧，但能使数据更新耕作更快更简洁。

7. 服务器发回一个HTML响应

图中为服务器生成并返回的响应：

HTTP/1.1 200 OK<br> Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,<br> pre-check=0<br> Expires: Sat, 01 Jan 2000 00:00:00 GMT<br> P3P: CP="DSP LAW"<br> Pragma: no-cache<br> Content-Encoding: gzip<br> Content-Type: text/html; charset=utf-8<br> X-Cnection: close<br> Transfer-Encoding: chunked<br> Date: Fri, 12 Feb 2010 09:05:55 GMT<br> <br> 2b3Tn@[...]

整个响应大小为35kB，其中大部分在整理后以blob类型传输。

内容编码头告诉浏览器整个响应体用gzip算法进行压缩。解压blob块后，你可以看到如下期望的HTML：

br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br> 

lang="en" id="facebook" class=" no_js">



...

关于压缩，头信息说明了是否缓存这个页面，如果缓存的话如何去做，有什么cookies要去设置（前面这个响应里没有这点）和隐私信息等等。

请注意报头中把Content-type设置为“text/html”。报头让浏览器将该响应内容以HTML形式呈现，而不是以文件形式下载它。浏览器会根据报头信息决定如何解释该响应，不过同时也会考虑像URL扩展内容等其他因素。

8. 浏览器开始显示HTML

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了：

9. 浏览器发送获取嵌入在HTML中的对象

在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。

下面是几个我们访问facebook.com时需要重获取的几个URL：

图片
http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
…CSS 式样表
http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
…JavaScript 文件
http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js
…

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等...

但 不像动态页面那样，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取。服务器的响应中包含了静态文件保存的期限 信息，所以浏览器知道要把它们缓存多长时间。还有，每个响应都可能包含像版本号一样工作的ETag头（被请求变量的实体值），如果浏览器观察到文件的版本 ETag信息已经存在，就马上停止这个文件的传输。

试着猜猜看“fbcdn.net”在地址中代表什么？聪明的答案是"Facebook内容分发网络"。Facebook利用内容分发网络（CDN）分发像图片，CSS表和JavaScript文件这些静态文件。所以，这些文件会在全球很多CDN的数据中心中留下备份。

静态内容往往代表站点的带宽大小，也能通过CDN轻松的复制。通常网站会使用第三方的CDN。例如，Facebook的静态文件由最大的CDN提供商Akamai来托管。

举例来讲，当你试着ping static.ak.fbcdn.net的时候，可能会从某个akamai.net服务器上获得响应。有意思的是，当你同样再ping一次的时候，响应的服务器可能就不一样，这说明幕后的负载平衡开始起作用了。

10. Der Browser sendet eine asynchrone (AJAX) Anfrage

Unter der Führung des großen Geistes von Web 2.0 hält der Client auch nach der Anzeige der Seite weiterhin Kontakt mit dem Server.

Nehmen Sie als Beispiel die Facebook-Chat-Funktion. Sie hält kontinuierlich Kontakt mit dem Server, um den Status Ihrer hellen und grauen Freunde zeitnah zu aktualisieren. Um den Status dieser Freunde zu aktualisieren, deren Avatare beleuchtet sind, sendet der im Browser ausgeführte JavaScript-Code eine asynchrone Anfrage an den Server. Diese asynchrone Anfrage wird an eine bestimmte Adresse gesendet und ist eine programmgesteuert erstellte Abruf- oder Sendeanforderung. Noch im Facebook-Beispiel sendet der Client eine Veröffentlichungsanfrage an http://www.facebook.com/ajax/chat/buddy_list.php, um die Online-Statusinformationen darüber zu erhalten, welcher Ihrer Freunde online ist.

Wenn wir dieses Muster erwähnen, müssen wir über „AJAX“ sprechen – „Asynchrones JavaScript und XML“, obwohl es keinen klaren Grund gibt, warum der Server im XML-Format antwortet. Ein weiteres Beispiel: Bei asynchronen Anfragen gibt Facebook einige JavaScript-Codeausschnitte zurück.

Fiddler ist unter anderem ein Tool, mit dem Sie die vom Browser gesendeten asynchronen Anfragen sehen können. Tatsächlich können Sie diese Anfragen nicht nur passiv beobachten, sondern sie auch proaktiv ändern und erneut senden. AJAX-Anfragen lassen sich so leicht täuschen, was die Entwickler von Online-Spielen, die den Punktestand behalten, wirklich sehr deprimiert macht. (Lügen Sie solche Leute natürlich nicht an~)

Die Facebook-Chat-Funktion bietet einen interessanten Problemfall in Bezug auf AJAX: Daten vom Server an den Client zu übertragen. Da es sich bei HTTP um ein Request-Response-Protokoll handelt, kann der Chatserver keine neuen Nachrichten an den Client senden. Stattdessen muss der Client alle paar Sekunden den Server abfragen, um zu sehen, ob neue Nachrichten vorliegen.

Lange Abfragen sind eine interessante Technik, um die Serverlast zu reduzieren, wenn diese Situationen auftreten. Wenn der Server bei der Abfrage keine neuen Nachrichten hat, ignoriert er den Client. Wenn vor Ablauf des Timeouts eine neue Nachricht vom Client empfangen wird, findet der Server die nicht abgeschlossene Anfrage und sendet die neue Nachricht als Antwort an den Client zurück.