从浏览器输入网址到显示页面之间发生了什么

好久没有更博了，最近一直忙于春招实习应聘，似乎有些打乱了我的节奏，我觉得还是应该把重心放在学习和记录上，不管有没有实习或者有没有拿到offer，我都一直stand by!

言归正传，当你输入一个网址到页面显示在你眼前到底发生了什么，这其实是个比较常见的问题，尤其在前端中，之前看到类似文章时感觉并不能完全看懂，最近学习了计算机网络，也算是融会贯通了吧，在这里写下自己的总结：

首先，从全局来讲，当键入一个url时，肯定是需要从服务器请求某个页面或某条数据然后显示到 用户自己的电脑屏幕上，而这个过程中其实包括：DNS对url域名的解析（在url中解析出服务器所在的IP地址，有的url也包括端口），计算机网络中的五层协议层传输，代理服务器的响应（如果请求的服务器有购买相应的代理服务器的话），最终html/css/js/……等文件的解析与展现（这就涉及到了我们熟悉的前端知识）。这只是概括，接下来将展开分析。

1.DNS对url域名的解析，获取主机所在的IP地址：

（1）浏览器将url中抽取出主机名（域名），并将主机名传送给DNS应用的客户端。

（2）DNS客户端向DNS服务器发送一个包含主机名的请求。

（3）DNS客户端最终会收到一份回答报文，其中包含有对该主机名的IP地址。

2.浏览器接收到来自DNS的IP地址，然后向位于该IP地址的80端口的HTTP服务器发起一个TCP连接（三次握手）：

        ①客户端发送一个带SYN标志的TCP报文到服务器，这是第一次握手。

        ②服务器端发送一个相应报文回应客户端，这个报文同时带ACK标志和SYN标志。表示对刚才客户端SYN报文的回应，同时又标志ACK给客户端，询问客户端是否准备好进行数据通讯。这是第二次握手

        ③客户端必须再次回应服务端一个ACK报文进行确认，同时发送一个HTTP请求给客户端，这是第三次握手。

注意：每一次进行客户端到服务器端或服务器端到客户端的通讯都要经历这么几个步骤：从源的应用层-》传输层-》网络层-》链路层-》物理层—…………—到目的端的物理层-》链路层-》网络层-》传输层-》应用层，这也是前端中常说的为什么要减少客户端向服务端HTTP请求的原因，因为太耗时了！这个过程在最后讲解【注释1】。

3.建立完TCP连接便可以进行通信了，服务器返回http响应：

        握手完毕后，服务器已经收到了客户端的http请求，服务器需要从本地磁盘找出客户端请求的数据，然后返回一条HTTP响应给客户端，并关闭TCP连接（但TCP只有当客户端收到数据后才会完全关闭，此时只是服务器端单方面无法与客户端传输数据）

4.客户端收到http响应，并关闭TCP连接：

        由于TCP连接是双全工的，因此每个方向必须单独进行关闭。 这原则上是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向上的连接。收到一个FIN意味着这一方向上没有数据流动，一个TCP连接在收到一个FIN后仍然能发送数据。首先关闭的一方执行主动关闭，而另一方执行被动关闭, 3，4条中的TCP连接关闭细节（四次挥手）如下：

        ①服务器发送一个FIN，用来关闭服务端器到客户端的数据传送（第一次挥手）

        ②客户端收到这个FIN，它返回一个ACK，确认收到（第二次挥手）

        ③客户端关闭服务器的连接，发送一个FIN给服务器（第三次挥手）

        ④服务器收到这个FIN，斌返回ACK报文，确认收到（第四次挥手）

5.以上2,3,4条都是针对请求的该网站没有缓存代理的情况，如果该网站存在代理服务器，那么将由代理服务器来协调客户端与服务器的通信（此处很多细节在前面讲过就不再赘述，比如三次握手建立TCP连接，四次挥手关闭TCP连接的详细过程），如下：

        ①客户端建立一个到web缓存的TCP连接，并向web缓存器发送一条HTTP请求。

        ②web缓存器进行检查，看看本地是否存储了该对象的副本，如果有，web缓存服务器就向客户端发送一个HTTP响应报文。

        ③如果web缓存器中没有该资源，就打开一个到该对象初始服务器的TCP连接。web缓存器则在这个缓存器到服务器的TCP上发送一个HTTP请求，初始服务器返回HTTP相应。

        ④web缓存器收到响应后，在本地存储一份副本，并向客户端的浏览器用HTTP响应报文发送该副本。

6.客户端收到http响应发送过来的文件，并将文件解析成页面展示给用户：

        ①解析html构建DOM树

        ②构建render树

        ③布局render树

        ④绘制render树

当然，这个过程避免不了回流和重绘，这也是我们前端人员在开发中需要着重考虑的事情。

【注释1】过程：

源的应用层-》传输层-》网络层-》链路层-》物理层———………———目的端的物理层-》链路层-》网络层-》传输层-》应用层

（1）在源主机上，应用层将一串应用数据流传送给传输层。

（2）传输层将应用层的数据流截成分组，并加上TCP报头形成TCP段，送交网络层。

（3）在网络层给TCP报头加上源，目的主机IP地址和IP报头，生成一个IP数据报，并将IP数据包送交给链路层。

（4）链路层在其MAC帧的数据部分装上IP数据报，再加上源，目的主机的MAC地址和帧头，并根据其目的MAC地址发送目的主机或IP路由器。

（5）在目的主机，链路层将MAC帧的帧头去掉，并将IP数据发送至网络层。

（6）网络层检查IP报头，如果报头和计算结果不一样，则丢弃IP数据包，则向源主机要求重发消息。若检验和计算结果一致，则去掉报头，将TCP段发送至传输层。

（7）传输层检查顺序号，判断是否是正确的TCP分组，然后检查TCP报头数据。若正确，则去掉TCP报头，向源主机发送数据分组。否则，向源主机要求重发消息。

（8）目的主机收到来自源主机的字节流。