前端必懂面试题之浏览器输入URL之后发生了什么

逃离我推掉我的手 2023-07-05 14:56 1阅读 0赞

![format_png][]

该题是一道特别经典的面试题了，涉及到前端人员应该掌握的基础网络知识，相信很多前端同学都了解。但是如果问深了，也能问出很多子问题来，也更能考验出面试者的知识深度和灵活运用程度。

浏览器输入URL之后大致有这么几个阶段：

> DNS域名解析建立TCP链接发送HTTP请求服务端处理请求服务端返回响应结果关闭TCP连接浏览器解析HTML并渲染布局

--------------------

1. DNS域名解析

*  我们访问一个网站的时候，可以通过主机名或者域名来访问。但是绝大多数的时候是使用域名来访问网站。因为相对于主机名的ip地址，域名更能让人记住。
 *  但是TCP/IP协议是通过IP地址来访问的，所以就需要一个机制，将域名转换为IP地址
 *  而DNS服务就是做这件事情，它提供了域名到IP地址之间的解析服务

> DNS解析过程1 . 访问www.baidu.com到DNS服务器2 . DNS服务器返回www.baidu.com的IP地址115.182.4X.18X3 . 接着请求IP地址为115.182.4X.18X的服务器4 . 成功访问到www.baidu.com的真正服务器DNS的优先级
> 
> 本地电脑会将一些经常使用的域名和对应的IP地址建立一个映射关系，并保存到本地host文件中。当DNS解析的时候，会优先从本地host文件中查找映射的IP地址映射
> 
> 1 . 如果在本地host文件中找到了域名对应的IP地址映射，会直接使用host文件中的IP地址2 . 如果在本地host文件中没有找到域名对应的IP地址映射，会从本地DNS服务器中查找3 . 如果在本地DNS服务器中也没有找到域名对应的IP地址映射，会继续向上一级的DNS服务器发送请求，直到DNS根服务器。如果找到，就进行回传，返回给浏览器。

--------------------

2. 建立TCP链接

先了解一个知识点: TCP/IP协议族TCP/IP协议族是由四层协议组成的系统。分别是:

*  1 . 应用层(http)
 *  2 . 传输层(tcp)
 *  3 . 网络层(ip)
 *  4 . 链路层(网络硬件)

![format_png 1][]

我的理解是：我们访问一个网站之前，首先要保证有网络对吧？那么此时，链路层就是ok的。经过上面第一步，已经知道了该域名映射的IP地址，并且可以访问，那么此时网络层也是ok的。那么接下来，就是传输层，也就是TCP。其实这里说的也不是很严谨，传输层不仅仅是TCP一种协议，还有UDP协议。UDP协议是无连接的，因为其不需要连接，所以效率比较高，但是也是因为不需要连接验证 所以安全性和可靠性得不到保障。而TCP是面向连接的，有校验机制。所以用的较广泛。但是也有缺点: 因为提前建立了连接，所以效率就较低。本文说的传输层指的是TCP协议。为了确保连接双方的可靠性，在双方建立连接时，TCP采用了三次握手策略

> TCP三次握手建立连接1 . 第一次握手
> 
> 客户端发送带有SYN标志的连接请求报文段，然后客户端就进入了SYN\_SEND状态 等待服务器确认
> 
> 2 . 第二次握手
> 
> 服务端接收到了客户端浏览器发送的SYN标志报文段后，需要发送ACK确认报文段对这个SYN报文段进行确认。同时又会向客户端发生自己的SYN请求信息。服务端会将上述信息放到一个报文段(SYN+ACK报文段)中 一同发送给客户端。此时服务端进入SYN\_RECV阶段
> 
> 第三次握手
> 
> 客户端浏览器接收到了服务端返回的SYN+ACK报文段(请求+返回)后，会向服务器发送新的ACK确认报文段。该报文段发送完毕后，客户端和服务端都进入到了ESTABLISHED状态，此时 就完成了三次握手

![format_png 2][]

> 知其然更要知其所以然，为什么要进行三次握手才能建立TCP连接？
> 
> 根本原因就是为了确保客户端和服务端双方的接收和发送能力都是ok的。经过第一次握手后，服务端收到了客户端的SYN请求标志，那么此时服务端就可以知道:客户端的发送能力是ok的，服务端本身自己的接收能力是ok的。经过第二次握手后，客户端收到了服务端的SYN+ACK请求+返回标志，那么此时，客户端就可以知道:客户端本身的发送和接收能力是ok的，服务端的发送和接收能力有是ok的。经过第三次握手后，服务端接收到了客户端的ACK返回标志，那么此时，服务端就可以知道:服务端本身自己的接收和发送能力是ok的。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvY2QzOGU4OWMtYzIwYi00ZDk0LWI5NWYtODNmZTE4NjBjMmI3?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3AzLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvOTMwYWNiOGQtNDVhOC00MWU5LWI2MDAtYzNkODJjMWQ5Yzgy?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvMjE0ZDc0ZmQtODg1NS00ODU2LTgzMTItMTAwYjE4NTQ2YWVl?x-oss-process=image/format,png