经典问题:从输入url到页面渲染的整个历程

前言

这个问题可以说是很经典的一个问题了,经典到讲的人太多,感觉现在很多面试都不愿意去问这个问题了。但是被问到但是你不会的话,那就很尴尬了,就像我一样😭。

DNS解析

整个过程的第一步就是DNS的解析,可以理解去寻找你url所匹配的ip地址。

  1. 首先客户端会去本地服务器(本地DNS缓存)寻找对应的ip地址
  2. 找不到就要去根域名服务器寻找
  3. 接着找不到就要去(COM/NET)顶级域名服务器中寻找
  4. 还找不到就去目标域名服务器中寻找,依旧找不到则返回错误信息
  5. 在任意一次访问成功后都会将结果缓存到本地DNS缓存中,下次访问时就可以直接在本地DNS缓存中查找也就是第一步,而不需要访问DNS服务器。

TCP的三次握手和四次挥手

这个可谓是经典中的经典问题。我们首先说一说TCP协议的特点。 特点:可靠性高

  1. 超时重传机制(TCP会将数据包备份在本地,如果发送超时会将本地储存的数据包重新发送)
  2. 拥塞控制(TCP会根据网络拥塞情况,调整发送窗口大小,尽可能)
  3. 丢包重传(如果数据包丢失也会重传,确保了整个数据包的有序性)
  • 从上面我们能总结出TCP协议的特点:安全但是效率低

三次握手

  1. 首先客户端给服务端发送建立连接的请求,客户端进入链接请求状态(SENT状态)
  2. 服务端收到请求后,服务端向客户端发送已接受到请求的应答,服务端进入链接确认状态(Received状态)
  3. 客户端收到同意链接的应答后,再发送一个确认请求。服务端收到确认请求后双方进入Established状态

三次握手和四次挥手也彰显了TCP协议安全的特点,但是同时也会导致启动慢的问题。三次握手整个过程是很严肃的,少一次都不行,面试官也喜欢问这个问题----三次握手少一次行不行?

三次握手少一次会怎么样?

首先我们肯定知道是不行的,不然也没必要承担启动慢的问题设计三次握手。接着就和面试官讲讲为什么:

  1. 我们假设只有两次握手。当我们有一个A请求,客户端向服务端发送建立连接请求,两次握手的话客户端接收到请求就该直接返回数据。
  2. 但是如果这个请求由于网络波动的原因,并没能及时到达服务端,而客户端因为长时间没有接收到数据,又重新传了一个新的B请求
  3. 这个B请求先于A一步到达了客户端,返回了数据,客户端接收到数据后认为自己已经拿到了需要的数据,就不再接收服务端数据了。
  4. 而此时A请求又到达了服务端,服务端认为这又是一个新的请求,又要返回数据,可是此时客户端已经不再接收了,于是客户端就会一直处于发送数据的状态,造成了资源的浪费。

简单来说,三次握手的首要原因是为了防止旧的失效连接造成混乱。,在第三次握手时没收到来自客户端的确认请求,就能够知道客户端并没有想要接着建立连接了。

三次握手之后就是HTTP数据传输

在三次握手和四次挥手之间还有一个HTTP数据传输千万不要忘了,可以把三次挥手看成建立连接,四次挥手看成断开连接,中间就还有一个数据传输。

然后就是四次挥手断开连接

  1. 客户端请求完数据后发送断开连接请求
  2. 服务端接受到断开连接请求后,通知应用层去释放TCP连接,此时不再接受客户端的请求
  3. 服务端如果还有没有发完的数据会继续发送,完毕后会向客户端发送释放连接的应答
  4. 客户端接受到释放连接的应答后,向服务端发送确认

以上就是四次挥手断开连接的过程,那么这里同样有一个问题,三次挥手可以吗?

四次挥手少一次会怎么样?

四次挥手主要就是为了确保数据能够完整的传输。当服务端收到客户端的FIN报文通知的时候,仅代表客户端的数据发送完毕了,但是此时服务端可能还有数据未能发送,如果三次挥手那此时直接断开连接服务端剩下的数据就仍未能发送完成,此时不断持续发送这部分数据可是客户端已经关闭没法做出应答。

尾声

这个问题感觉现在很少问了,但是一被问到你不会就完蛋了,之前面试一家小公司的时候被问到这个我一下卡住,还想瞎扯到别的方向回答,结果面试官直接打断我,然后直接说自己问完了问我有没有什么要问他的😭。还是第一次直接被打断然后直接结束。

相关推荐
kirito学长-Java13 分钟前
springboot/ssm网上宠物店系统Java代码编写web宠物用品商城项目
java·spring boot·后端
海绵波波10720 分钟前
flask后端开发(9):ORM模型外键+迁移ORM模型
后端·python·flask
余生H25 分钟前
前端Python应用指南(二)深入Flask:理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
outstanding木槿29 分钟前
JS中for循环里的ajax请求不数据
前端·javascript·react.js·ajax
酥饼~36 分钟前
html固定头和第一列简单例子
前端·javascript·html
一只不会编程的猫39 分钟前
高德地图自定义折线矢量图形
前端·vue.js·vue
m0_7482509341 分钟前
html 通用错误页面
前端·html
来吧~1 小时前
vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)
前端·vue.js·音视频
魔术师卡颂1 小时前
最近看到太多 cursor 带来的焦虑,有些话想说
前端·aigc·openai