一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

从输入URL到页面渲染的前世今生(前世篇)

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

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

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

第一步 DNS解析

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

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

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

从输入URL到页面渲染的前世今生(前世篇)

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

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

第二步 与服务器建立通信

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

从输入URL到页面渲染的前世今生(前世篇)

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

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

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

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

第三步 与服务器断开连接

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

从输入URL到页面渲染的前世今生(前世篇)

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

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

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

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

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

原文链接:https://juejin.cn/post/7217248299924733989 作者:布鲁斯要蓝调

(0)
上一篇 2023年4月2日 下午4:00
下一篇 2023年4月2日 下午4:10

相关推荐

发表评论

登录后才能评论