完整的URL请求页面过程
当我们在网页浏览器（Web browser）的地址栏中输入URL时，Web页面是如何呈现的？就让我们来聊聊从用户输入到页面加载完成的过程中都发生了什么事情。
一、请求过程简介
用户输入URL大概发生了以下一些事：
(1) DNS域名解析到对应的IP地址；
(2) 浏览器向Web服务器发送一个HTTP请求；
(3) 服务器的永久重定向响应;
(4) 浏览器跟踪重定向地址;
(5) 服务器处理请求，并返回一个HTTP响应;
(6) 浏览器显示HTML;
[1]: 请求过程
二、请求过程详解
1. DNS查找IP地址
DNS是域名系统（Domain Name System）的缩写，是因特网的一项核心服务，是和HTTP协议位于应用层的协议，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。
(一) DNS 查找过程
- 浏览器缓存 – 浏览器会缓存DNS记录一段时间，但是操作系统并没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
- 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname），这样便可获得系统缓存中的记录。
- 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
- ISP DNS缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
- 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到example的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
(二) DNS进行域名解析的过程
- 客户端发出 DNS 请求翻译 IP 地址或主机名；
- DNS 服务器在收到客户端的请求后，检查 DNS 服务器的缓存，若查到请求的地址或名字，即向客户端发出应答信息；
- 若没有查到，则在数据库中查找，若查到请求的地址或名字，即向客户端发出应答信息；
- 若没有查到，则将请求发给根域 DNS 服务器，并依序从根域查找顶级域，由顶级查找二级域，二级域查找三级，直至找到要解析的地址或名字。然后，向客户端所在网络的 DNS 服务器发出应答信息，DNS 服务器收到应答后，先在缓存中存储，然后，将解析结果发给客户端。
- 若没有找到，则返回错误信息。
### 2. HTTP请求 > #### (一) 三次握手建立TCP连接 在 http 工作开始之前，浏览器首先要通过网络与服务器建立连接，该连接是通过 TCP 来完成的。该协议与 IP 协议共同构建 Internet ，即著名的 TCP/IP 协议族，因此 Internet 又被称作是 TCP/IP 网络。**http 是比 TCP 更高层次的应用层协议**。根据规则，只有低层协议建立之后才能进行更高次层协议的连接。因此，首先要建立 TCP 连接，一般 TCP 连接的端口号是 80 。在 TCP/IP 协议中，TCP 协议提供可靠的连接服务，采用三次握手建立一个连接： 1. 第一次握手：建立连接时，客户端发送 SYN 包（syn=j）到服务器，并进入 SYN_SENT 状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers） 2. 第二次握手：服务器收到 SYN 包，必须确认客户的 SYN（ack=j+1），同时自己也发送一个 SYN 包（syn=k），即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态； 3. 第三次握手：客户端收到服务器的 SYN+ACK 包，向服务器发送确认包 ACK(ack=k+1），此包发送完毕，客户端和服务器进入 ESTABLISHED（TCP连接成功）状态，完成三次握手。 [3]: 三次握手建立TCP连接 > #### (二) 完成三次握手，客户端与服务器开始传送数据。 一旦建立了 TCP 连接，浏览器就会向服务器发送 http 请求命令。浏览器发送其请求命令之后，还要以头信息的形式向服务器发送一些别的信息。此后，浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。 [4]: 完成三次握手 > #### (三) 四次挥手终止连接 由于 TCP 连接是全双工的，因此每个方向都必须单独进行关闭。原则是当一方完成它的数据发送任务后，就能发送一个 FIN 来终止这个方向的连接。收到一个 FIN 只意味着这一方向上没有数据流动。一个 TCP 连接在收到一个 FIN 后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另一方执行被动关闭。 1. 第一次挥手：TCP 客户端发送一个 FIN，用来关闭客户端到服务器的数据传送（客户端向服务器发送一个断开连接的请求）; 2. 第二次挥手：服务器收到这个 FIN，它发回一个 ACK（确认收到请求的信号），确认序号为收到的序号加 1 。和 SYN 一样，一个 FIN 将占用一个序号 (服务器接收到请求之后，发送确认接受到请求的信号); 3. 第三次挥手：服务器关闭客户端的连接，发送一个 FIN 给客户端 (服务器向客户端发送断开的通知); 4. 第四次挥手：客户端发回 ACK 报文确认，并将确认序号设置为收到序号加 1 (客户端接收到断开的通知后断开连接，并反馈一个确认信号，服务器接收到确认信号断开连接)。 [5]: 四次挥手终止连接
### 3. 服务器的永久重定向响应 服务器会给浏览器返回一个301永久重定向响应服务器给浏览器响应一个 301 永久重定向响应，这样浏览器就会访问http://www.facebook.com/ 而非 http://facebook.com/ 。 为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？其中一个原因跟搜索引擎排名有关。你看，如果一个页面有两个地址，就像 http://www.igoro.com/ 和 http://igoro.com/ ，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道 301 永久重定向是什么意思，这样就会把访问带 www 的和不带 www 的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。 ### 4. 浏览器跟踪重定向地址 浏览器通过 301 知道 http://www.facebook.com 才是要访问的正确地址，所以它会发送另一个获取请求。 ### 5. 服务器处理请求，并返回一个HTTP响应 服务器接收到获取请求并处理，然后返回一个HTTP响应 ### 6. 页面渲染 现代浏览器渲染页面的过程是这样的：**解析 html 以构建 DOM 树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树** DOM 树是由 html 文件中的标签排列组成。
渲染树是在 DOM 树中加入 css 或 html 中的 style 样式而形成。渲染树只包含需要显示在页面中的 DOM 元素，像 <head>元素或 display 属性值为 none 的元素都不在渲染树中。在浏览器还没接收到完整的 html 文件时，它就开始渲染页面了。
在遇到外部链入的脚本标签、样式标签、图片时，会再次发送 http 请求重复上述的步骤。在收到 css 文件后，会对已经渲染的页面重新渲染，加入它们应有的样式。图片文件加载完，立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。