前言
我们知道当在浏览器上输入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服务器的连接建立后，浏览器会发送一个初始的HTTPGET请求，请求目标通常是一个HTML文件，服务器收到请求后，将返回一个HTTP响应报文，内容包括响应头和HTML正文。
浏览器解析渲染页面
-
浏览器收到服务端的响应之后，开始解析并渲染页面，不同的浏览器引擎渲染过程有点不太一样，以谷歌浏览器为例：
1.浏览器会处理
HTML标记并构建DOM树。2.处理
CSS标记并构建CSSOM树。3.将
DOM树和CSSOM树合并成一个渲染树。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
