从输入URL到页面渲染的前世今生（前世篇）

前言：
之前写了篇关于*浏览器向服务器请求回了数据之后浏览器如何渲染出页面* 的文章，有兴趣的可以点击这里 从url到页面渲染的前世今生（今生篇）。当然有今生就有前世，那么前世发生了怎么一段故事呢？

当我们在浏览器的导航栏里面输入了一串 URL 后,浏览器为什么就会拿到一段代码并且将这段代码渲染出来呢？所以前世就是浏览器是怎么样向服务器获取到这些代码的。从向浏览器的输入栏里面输入一串 URL 之后，当你按下回车键之后浏览器就开始向这个地址发送请求，然后将数据请求回来。

这样讲着是不是感觉蛮简单的，我在浏览器的输入栏里面输入地址 --> 发起请求 --> 获得数据，这样就拿到了数据，看着好像就只有这几个过程，其实不然。浏览器向服务器获取数据就是两台计算机之间互相通信，最重要的就是要获取对方的地址；就比如你在外面上大学，家里面要给你寄东西，总要知道你学校的地址吧。

第一步 DNS解析

所以在输入 URL 之后，浏览器要做的第一步就是找到当前输入的 URL 所对应计算机的地址，于是浏览器开始进行 DNS 解析。那么什么是 DNS 解析呢？

简单通俗的来讲 DNS 解析就是一个系统，用来将 如：juejin.cn/ 这样一个利于人类记忆的域名解析成 如：192.168.0.1 这样子的一个 IP 地址。这也好理解，我们要访问某个服务器（自己的电脑与服务器通信），单纯的记住 juejin.cn 这个东西比记住一串数字简单吧，于是就有 DNS 这个系统帮助我们将 juejin.cn 转换成服务器的一连串数字所对应的服务器实际网络地址吧。

那么 DNS 解析的实际过程是怎样的呢？

1. 本地域名服务器：主机首先向本地域名服务器去询问你知道 www.jeujin.cn 这个地址吗？本地域名服务器开始查询自己的缓存，然后发现没有这个缓存，于是走向第二步。
2. 根域名服务器：当根域名服务器收到本地域名服务器的迭代查询请求报文时，要么给出所要查询的IP地址，要么告诉本地域名服务器：”你下一步应当向哪一个域名服务器进行查询。”
3. 顶级域名服务器：也就是比如 .com 这样的后缀，它知道所有 .com 后缀域名的 IP 地址，于是就将这个地址返回给本地 DNS 服务器。
4. xxx服务器地址

这样就实现了 DNS 解析，费了九牛二虎之力浏览器终于知道了通信地址，于是就要跟服务器开始建立连接。

第二步 与服务器建立通信

与服务器建立通信当然离不开 TCP 的三次握手。三次握手，顾名思义就是客户端与服务端进行三次通信。

第一次握手：客户端向服务端发送报文，发出请求 SYN=1，同时选择一个初始的序列号 seq=x，服务端状态就从 LISTEN 变成 SYNC_RCVD。第一次握手可以看出：客户端的发送能力，和自己的接收能力处于正常状态。

第二次握手：服务端发送确认报文，SYN=1, ACK=x+1,seq=y,此时服务器进入 SYN_RECV 状态。
第二次握手客户端可以看出：服务端的发送和接收能力都正常，客户端的发送和接收能力也都正常，但重要的一点是服务端不知道客户端的接收能力是否正常。

第三次握手：因为此时服务端还不知道客户端的接收能力是否正常，所以就需要有此次握手。客户端接收到了服务端的 syn+ack 报文，此时客户端处于 ESTABLISHED 状态并且客户端会再发送一个报文。第三次握手可以看出：  客户端的发送接收，服务端的发送接收能力均正常。

客户端与服务器建立通信之后，那么此时服务器就可以向客户端发送数据了，于是客户端就拿到了这些代码，麻溜的就开始进行渲染。当然客户端拿到了数据之后就要与服务器断开连接了，于是就有了接下来的第三步。

第三步 与服务器断开连接

客户端拿到了自己想要的数据之后当然要与服务器断开连接，不然的话大家跟服务器建立了连接之后都占着这个位置，服务器那不得累死。所以此时就涉及到了 TCP 的四次挥手。

• TCP 四次挥手

1. 第一次挥手：客户端认为数据发送完成，向服务端发送链接释放请求，客户端进入FIN_WAIT_1状态。

2. 第二次挥手：服务端接收到客户端的请求后，发送ACK包，进入CLOSE_WAIT 状态，此时连接已经释放，服务端不再接收客户端发送的数据了，但是依然可以向客户端发送数据，因为此时服务端看你还有数据没传输完。

3. 第三次挥手：如果服务端还有没发完的数据，会继续发送，完毕后会向客户端发送链接释放请求，服务端进入LAST—ACK最后确定状态，等待客户端的回应。

4. 第四次挥手： 客户端接收到了释放请求后，向服务端确认应答，客户端进入 TIME-WAIT 状态，持续2MSL，如果没有再接收到服务端的任何请求，就进入CLOSED状态。服务端接收到了确认应答也进入到CLOSED状态。

本文正在参加「金石计划」