前言
我们知道当在浏览器上输入baidu.com
并按下回车时,一下子我们就能看到百度的主页面,那这中间发生了一些什么事呢?对于用户在地址栏输入URL
到页面的展示过程中其实包含了许多的前端知识点,比如说浏览器的架构,网络层以及操作系统,接下来我们就一起来看一下吧。
浏览器是一个多进程架构
主进程
浏览器内核的核心组成部分之一,它负责协调和管理整个浏览器的工作流程以及与操作系统的交互。主要的功能包括用户界面管理,进程管理,资源管理,安全性管理,用户输入管理等。
渲染进程
负责处理和渲染网页的内容,下载网页的HTML
、CSS
和JavaScript
等资源,然后解析和渲染这些资源,将网页呈现给用户。它将HTML
文档转化为用户可以看到和与之交互的图形界面。
GPU进程
负责处理与图形和图形渲染相关的任务,以提高浏览器的性能和图形处理能力。
网络进程
负责处理与网络通信相关的任务,确保浏览器能够与远程服务器进行通信、下载网页内容和资源、管理连接等,主要功能和职责有网络的请求与响应,资源管理,安全性和隐私DNS
解析等等。
从用户输入URL到页面渲染的整个过程需要浏览器的这些进程互相配合完成。
如下图所示:
详细过程
URL输入
-
URL全称叫做统一资源定位符,用于定位互联网上的资源,俗称网址。
-
我们在地址栏输入网址后并按下回车键,浏览器会根据输入的地址做出以下判断:
1.检查输入的
URL
是否是一个合法的连接。2.如果合法,则判断输入的
URL
是否完整,如果不完整,浏览器可能会对地址进行猜测, 补全自己的前缀或后缀。3.如果不合法,将输入的内容作为搜索条件,使用用户默认设置的搜索引擎进行搜索。
4.现在大部分的浏览器都会从历史记录,书签等地方开始查找我们输入的地址,并给出智能 提示。
DNS解析
DNS
翻译过来就是域名系统,是互联网上作为域名和IP地址相互映射的一个分布式数据库。- 因为浏览器不能直接通过域名找到对应服务器的
IP
地址,所以需要进行DNS
的解析,查找到对应的IP
地址进行访问。 - 整个过程如图所示:
-
详细描述一下:
1.用户在浏览器中输入域名,操作系统会先检查浏览器的缓存和本地的
host
文件中,检查 是否有这个网址记录,有的话就从记录里面找到对应的IP
地址,完成域名解析。2.没有的话再接着使用
TCP/IP
参数设置的DNS
服务器进行查询,如果要查询的域名包含 在本地配置区域资源中,则返回解析结果,完成域名解析。3.没有的话再接着检查本地
DNS
服务器是否缓存有该网址的记录,有的话返回解析结果, 完成域名解析。4.如果还没有的话本地
DNS
服务器会发送查询报文到根DNS
服务器,根DNS
服务器收到 报文之后会返回顶级域DNS
服务器地址,然后本地DNS
服务器会发送查询报文到顶级域 名服务器,顶级域名服务器收到请求后会返回权威DNS
服务器地址,然后本地DNS
服务 器地址再发送查询报文到权威DNS
服务器,权威DNS
服务器接收到请求后,返回最终的IP
地址,完成域名解析。
建立TCP的连接
- 当浏览器获取到服务器的
IP
地址后,浏览器会发起TCP
连接请求,这个连接请求到达服务端之后会通过TCP
的三次握手,建立TCP
的连接,如下图所示:
- 第一次握手:客户端发送'SYN'报文,并进入'SYN_SENT'状态,等待服务器的确认。
- 第二次握手:服务器收到'SYN'报文,需要给客户端发送'ACK'确认报文,同时服务器也要向客户端发送一个'SYN'报文,所以也就是向客户端发送'SYN'+'ACK'报文,此时服务器进入'SYN_REVD'状态。
- 第三次握手:客户端收到'SYN'+'ACK'报文,向服务器发送确认包,客户端进入'ESTABLISHED',待服务器收到客户端发来的'ACK'包也会进入'ESTABLISHED'状态,完成三次握手。
为什么要三次握手,两次握手,四次握手不行吗?
-
如果是两次握手,当客户端发送一个连接请求A时,由于网络原因没有到达服务器,紧接着客户端又会发送一个连接请求B,服务器接收到了请求B,响应连接,建立连接,完成传输数据后断开连接。一段时间后请求A到达了服务器,服务器会以为客户端又想与它进行连接,它会返回响应报文并且一直处于待连接状态,造成资源的浪费。
-
如果是四次握手,也就是将原本的第二次握手拆分成两次,一次发送确认报文,一次发送请求建立连接报文,但是这样同样会造成资源浪费,服务器可以将两次发送合并成一次。
发送HTTP/HTTPS请求
- 建立连接后就可以通过
HTTP
进行数据传输了。 - 如果使用了
HTTPS
,会在TCP
和HTTP
之间多添加一层协议作为加密和认证的服务,HTTPS
使用SSL
和TLS
协议,保证了信息的安全。 SSL
协议的作用是认证客户端和服务端,确保数据发送到正确的客户端和服务器,加密数据防止数据中途被窃取,维护数据的完整性,确保数据在传输过程中不被改变。TLS
协议的作用是在两个通信应用程序之间提供保密性和数据完整性,TLS
协议由两层组成:TLS
记录协议和TLS
握手协议。
服务器响应请求
- 当浏览器到
web
服务器的连接建立后,浏览器会发送一个初始的HTTP
GET
请求,请求目标通常是一个HTML
文件,服务器收到请求后,将返回一个HTTP
响应报文,内容包括响应头和HTML
正文。
浏览器解析渲染页面
-
浏览器收到服务端的响应之后,开始解析并渲染页面,不同的浏览器引擎渲染过程有点不太一样,以谷歌浏览器为例:
1.浏览器会处理
HTML
标记并构建DOM
树。2.处理
CSS
标记并构建CSSOM
树。3.将
DOM
树和CSSDOM
树合并成一个渲染树。4.根据渲染树来布局,以计算每个节点的集合信息。
5.将各个节点渲染到屏幕上,这样就完成了页面渲染。
HTTP请求结束,断开TCP连接
- 渲染完成之后就可以断开
TCP
的连接。 - 现在的浏览器的页面为了优化请求的耗时,默认都会开启持久的连接,也就是说标签页关闭的时候
TCP
的连接才会关闭,这个关闭的过程就是四次挥手,具体过程看下图:
-
详细描述一下:
1.最开始的一次挥手,客户端发起
'FIN'
包,客户端进入'FIN_WAIT_1'
状态,TCP规定,即使'FIN'
包不携带数据,也要消耗一个序号。2.第二次挥手,服务器端接收到了
'FIN'
包,发出确认包'ACK'
,并带上自己的序号,服务端进入'CLOSE_WAIT'
状态,这个时候客户端已经没有数据要发送了,不过服务器端有数据发送的话,客户端依然需要接收。客户端接收到服务端发送的'ACK'
后,进入到'FIN_WAIT_2'
状态。3.第三次挥手,服务器端数据发送完毕之后,向客户端发送
'FIN'
包,半连接状态下服务器可能又发送了一些数据。服务器此时进入了'LAST_ACK'
状态。4.第四次挥手,客户端收到服务器的
'FIN'
包之后,发送确认包'ACK'
,此时客户端进入'TIME_WAIT'
状态,此时TCP
连接还没有释放,必须经过两个'MSL'
后,才会进入'CLOSED'
状态,可以看出服务端结束TCP
连接的时间要比客户端要早一些。
为什么建立连接时需要握手三次,关闭连接时需要四次呢?
- 在
TCP
握手的时候,接收端发送'SYN+ACK'
的包是将一个'ACK'
和一个'SYN'
合并到一个包中,所以减少了一次包的发送,三次完成握手。 - 对于四次挥手,
TCP
是全信工通信,在主动关闭方发送'FIN'
包之后,接收端可能还要发送数据,不能立即关闭服务器端到客户端的数据通道,所以不能将服务器端的'FIN'
包和对客户端的'ACK'
包合并发送,只能先确定'ACK
',然后服务器等到无需发送数据时再发送'FIN'
包,所以四次挥手时必须是四次数据包的交互。
四次挥手结束后,为什么客户端没有立刻关闭呢?
- 为了确保第四次挥手的确认消息到达服务端。
- 如果服务端在规定时间内未收到最后的确认消息,会重新进行第三次挥手请求断开连接,客户端重新发送确认消息。
MSL
是报文的最长生存时间,2个MSL
是在网络中来回两个报文所需要的最长时间,如果超过这个时间,客户端没有重新收到断开连接的请求,说明四次挥手顺利完成,可以断开连接了。
结语
到这里就是输入URL
到页面展示的全过程,本文如有纰漏请指出,有歧义欢迎大家评论区讨论,希望本文能帮到屏幕前的你。
参考资料
浏览器原理:从浏览器进程角度系统全面回答从输入URL到页面显示发生了什么_哔哩哔哩_bilibili