前端：从 URL 输入到页面展现发生了什么?(What really happens when you navigate to a URL)

Posted 2020-09-06 细雨落花

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端：从 URL 输入到页面展现发生了什么?(What really happens when you navigate to a URL)相关的知识，希望对你有一定的参考价值。

原文链接：

http://blog.csdn.net/tangxiaolang101/article/details/54670218

写在前面的话，这是一篇译文，阅读资料时顺带整理翻译的，原文地址：http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/

作为一个程序员，你应该对web应用是如何工作的有一个高水平的认识，它工作过程都包含了哪些技术：浏览器、HTTP、html、web server、 request handlers等等。
这篇文章，我们将会对当你访问一个URL时所发生的一系列事情进行深入的探讨。

1.将URL输入到浏览器中

当然，这是最点单的一个，例如：facebook.conm

2.浏览器根据域名查找IP地址

技术分享
浏览的第一步就是为访问域名计算出IP地址。DNS查找过程如下：

Browser cache(浏览器缓存)—浏览器会缓存DNS记录一段时间。有趣的是，操作系统并没有告诉浏览器每一个DNS记录缓存的存活时间，所以浏览器自己会缓存它们固定的一段时间（不同的浏览器存在差异，一般是2-30分钟）。
OS cache（操作系统缓存）—如果浏览器缓存中没有找到对应的记录，浏览器就会做一次系统请求（Windows系统中就是根据名称从host文件中获得IP地址）。操作系统有它自己的缓存。
Router cache（路由缓存）—请求会在你的路由器上继续进行，路由一般都会有自己的DNS缓存。
ISP DNS cache(ISP DNS缓存)—下一个地方就是查找ISP‘s DNS服务器了，当然，它也会有一份缓存。
Recursive search(递归查找)—你的ISP‘s DNS服务从根域名开始循环查找，根据.com查找顶级域名服务器，然后再到 Facebook 的域名服务器。通常来说，DNS服务器都会有.com域名服务器的缓存，所以根域名服务器不是必须的。

下面是一个DNS循环查找的图表：技术分享

3.The browser sends a HTTP request to the web server

技术分享
你可以确定 Facebook 的页面不是从浏览器缓存中取到的，因为动态页面会很快就过期失效的（把过期时间设置在过去）。
所以，浏览器将会向 Facebook 的服务器发送一个请求：

GET http://facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

GET 关键字表示请求获取： http://facebook.com/。浏览器的自我标识（User-Agent），和请求接受什么类型的响应。（Accept和Accept-Encoding）。Connection关键字请求服务器保持TCP链接。
请求也会包含这个域名下的cookies。

4.Facebook 服务器通过重定向进行响应

技术分享
这是 Facebook 返回浏览器请求的响应：

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

服务器响应通过301 Moved Permanently告诉浏览器访问 http://www.facebook.com/来代替http://facebook.com/.

5.浏览器重定向

技术分享浏览器现在知道http://www.facebook.com/是正确的URL地址，然后向这个地址发送了另一个GET请求：

GET http://www.facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
Host: www.facebook.com

请求头和上面的基本相同。

6.服务器处理请求

技术分享服务器将会接收GET请求，然后处理它，并且对它做出响应。
这看起来是个简单的任务，实际上这里会发生许多有趣的事情，即使是访问像我博客这样简单的网站，更不用说像 Facebook 这样的大型网站了。

web服务软件
web服务软件（例如：IIS 或者 Apache）接收HTTP请求，并且决定采用哪种方法来处理这个请求。一个请求处理是一个进程（在ASP.NET, php, Ruby,...），包括读取请求和形成HTML响应。
请求处理
请求处理读取请求的参数和cookies。它可能会读取或者更新服务器上存储的数据。然后请求处理将会生成一个HTML响应。

7.服务器返回HTML响应

技术分享
这是服务器返回的响应：

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

2b3
[email protected]????[...]

整个响应是36KB。
Content-Encoding关键字告诉了浏览器响应主体内容是通过 gzip 方式进行压缩的。通过解压后，就可以看到你期盼已久的HTML了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 
      lang="en" id="facebook" class=" no_js">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />

处理压缩方式外，响应头还指定了是否缓存页面，通过哪种方式缓存，cookies如何设置，隐私数据如何处理等等信息。

8.浏览器开始渲染HTML

在浏览器接收整个 HTML 文档之前，网站已经开始渲染了。

9.浏览器为嵌入的对象发送请求（例如：图片等）

技术分享
浏览器渲染HTML时，会注意的哪些需要发起请求的标准。然后发送GET请求为它们获取文件。
下面是我访问 Facebook ，浏览器做的请求：

每个请求都会和请求HTML页面一样，走相似的流程。所以，浏览器会在DNS中查找域名，发送请求URL，重定向等等。
当然，静态文件是可以让浏览器缓存的。一些文件可以直接从缓存中获得，不用连接服务器。浏览器知道这些特有文件缓存多长时间，因为响应头的Expires关键字设置了这个文件的有效期。除此之外，每一个响应可能也会保留一个ETag头，它就像版本号一样。如果浏览器发现这个文件的ETag号已经存在了，它可以立即停止请求。