前言
在现在的项目开发中，前后端分离成为常态。因此，在web系统开发的过程中，前端需要通过url去访问服务器的资源，将获取到的数据渲染到页面中。
1、在浏览器中输入一个url会发生什么
- 输入请求的url
- 进行DNS解析
- 建立TCP连接
- 发送http/https请求
- 服务器响应请求
- 客户端渲染页面
- 断开连接
总结来说一个请求的完整过程就是这七个步骤，但是每个步骤又涉及到很多原理。
2、执行过程的详解
2.1、输入请求的url
通常情况下，我们要访问一个网站，就先需要在浏览器的搜索栏中输入对应的网址。
首先浏览器会判断输入的url是否合法，如果合法的话就会检查url是否完整，不完整浏览器则会进行猜测，自动补全url的前缀和后缀。
如果url不合法的话，就会将url作为搜索内容进行搜索。
2.2、DSN解析
DNS解析，简单来说就是查询服务器达到缓存，然后去解析url，找到服务器的IP地址
DNS是将域名和IP地址相互映射的一个分布式服务器，有三种类型的DNS服务器：根DNS服务器，顶级域名DNS服务器，权威DNS服务器。
IP其实也不一定要通过DNS解析来获取，IP地址有些时候会被客户端缓存，只有DNS缓存中没有命中的时候才会请求DNS服务器。
DNS的解析步骤
- 先判断浏览器是否有缓存IP地址
- 判断本机是否有缓存该IP地址
- 判断本地域名解析器是否有缓存IP地址
- 如果本地缓存中没有改记录，则本地域名服务器就会将请求发送给根域名服务器，然后根域名服务器会将顶级域DNS服务器的IP地址返回给本地域名服务器
- 本地服务器继续向这个顶级域服务器发送请求，顶级域服务器受到请求后返回这个域名对应的权威服务器的IP地址给本地服务器
- 本地服务器向权威服务器发送请求，权威服务器将这个域名的IP地址返回
- 本地域名服务器将返回的结果保存到缓存，以便于下次使用，同时将结果返回给客户端
DNS在进行区域传输的时候使用TCP协议，其他时候使用UDP协议；域名解析时使用UDP协议，不用经过TCP的三次握手，这样DNS服务器的负载更低，响应也会更快。
2.3、建立TCP连接
一般情况来说，在我们通过DNS解析获取到服务器IP地址之后，浏览器就会想服务器80端口号发起TCP连接请求。
三次握手：
第一次：客户端给服务端发送报文（SYN=1,seq=1），服务端确定报文内容。（这一步可以确定客户端的发生功能，服务端的接收功能是否正常）
第二次：服务端确定接收到第一次发生的报文之后，发送报文（SYN=1，ACK=1，seq为随机数y，确定号ack为x+1），服务端进入SYN-RCVD状态。客户端接收到报文，客户机TCP进入ESTABLISHED状态。（这一步确定客户端的接收功能，服务端的发送功能）
第三次：客户端返回ACK包（ACK=1，seq=x+1，ack=y+1），服务端收到报文之后，进入ESTABLISHED状态，双方都进入ESTABLISHED状态，客户端与服务端建立连接，开始数据传输。
前两次握手既确定双发能联通外，还通知了双方一些端口号信息。
注：由于本文主要是简单阐述一下浏览器输入一个url的执行过程，对于TCP三次握手和四次挥手的部分则不加以详细的解释。（绝对不是因为我不够熟悉）
2.4、发送http/https请求
相较于http请求，https请求更加安全，但是相对的效率相比http请求会有所下降。
简单理解：http+加密+认证+完整性保护=https
发送的http请求：我们在项目开发中使用axios氢气获取服务器的数据资源其实也是一种http请求，主要是发送报文给服务端，发送的报文主要包括请求行，请求头，请求体
2.5、服务器响应请求
服务器接收到http/https请求，响应该请求，返回报文，报文主要内容包括响应行，响应头，响应体。
如果对请求报文和响应报文的具体内容感兴趣，可以打开浏览器的控制台，通过Network进行查看。
2.6、客户端渲染页面
一般来说，我们可以在响应体中获取到对应的html文件（包含html，css和JavaScript）。
简单来说，浏览器会解析html文件来生成页面。
详细点就是：浏览器解析html文件，生成DOM树，解析css文件，生成CSSDOM树，将DOM树和CSSDOM合并，生成渲染树（或者叫布局树），根据渲染树确定节点信息，将节点进行渲染。
2.7、断开连接
在这里TCP连接分为持久连接和非持久连接，浏览器为了提高效率，一般会使用持久连接，持久连接只建立一个TCP连接，只有在关闭浏览器页面时才会断开连接，而非持久连接每次请求都需要建立一个TCP连接。
通过TCP的四次握手就可以断开连接，在这里就不详细赘述四次挥手的流程，感兴趣的同学可以看参考资料中的TCP三次握手和四次挥手过程。
参考资料
浏览器从输入url到页面展示的过程 - 掘金 (juejin.cn)
面试官：请说一下浏览器从输入URL 到页面展示这个过程中都经历了什么？你能答出来吗？_哔哩哔哩_bilibili
TCP三次握手和四次挥手过程_白马FEI马的博客-CSDN博客_tcp三次握手和四次挥手的全过程
《计算机网络》谢希仁第七版
