浅谈输入URL到浏览器页面呈现中间经历的过程

浅谈输入URL到浏览器页面呈现中间经历的过程

步骤

1- 输入网址

2- 缓存解析

3- 域名解析

4- tcp连接，三次握手

5-发送http请求

6-返回http响应

7-页面渲染

8-断开连接

---

一、输入网址

这个没什么好说的，访问页面第一步当然是输入URL地址。

二、缓存解析

浏览器获取到用户输入的URL地址，自动去解析，当然它优先去看缓存当中有没有，这样速度最快，用户体验更好。如果缓存有，则从缓存中显示页面，如果缓存中没有，再执行步骤三

缓存就是之前访问过的一些web资源，比如一些js,css,图片文件保存在本地的内存或磁盘中。

在Chrome中右键检查或者F12键打开开发者工具，选择network刷新页面，选择all，即可看到一些资源是从缓存加载的，即图中的那些 served from disk cache,resource size:

可以看到这些资源的来源是缓存当中，从缓存中获取的可以直接显示到页面中，不需要发送http请求。

三、域名解析

与步骤二反之，当你第一次访问某个页面，浏览器和电脑中是没有这个页面的缓存的，此时所有的资源都需要发送http请求，那么在发送http请求之前，浏览器做了些什么？

在发送http请求之前，需要进行DNS解析，即域名解析。

这里我解释一下域名和IP地址的关系，其实每个网页都有自己的IP地址，输入IP地址也可以访问到网页，但是这样不便于用户记忆，于是域名就出现了，但是浏览器只认识IP，则访问之前需要解析成IP地址让浏览器访问。域名的解析工作由DNS服务器完成。

**DNS解析：**域名到IP地址的转换过程。域名的解析工作由DNS服务器完成，解析后就可以获取到域名对应的IP地址了

四、tcp连接，三次握手

在域名解析之后，浏览器向服务器发起了http请求，tcp连接，三次握手建立tcp连接。TCP协议是面向连接的，所以在传输数据前必须建立连接。

TCP三次握手的过程如下：

• 客户端发送一个带 SYN=1,Seq=X的数据包到服务器端口(第一次握手，由浏览器发起，告诉服务器我要发送请求了)
• 服务器发回一个带SYN=1,ACK=X+1,Seq=Y的响应包以示传达确认信息(第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧)
• 客户端再回传一个ACK=Y+1,Seq=Z的数据包，代表“握手结束” （第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧）

通俗理解：

数据传输是双向的

第一次握手：客户端发送一个SYN请求打开一个端口，好让服务端接受数据。

第二次握手：服务端返回一个SYN也请求客户端打开一个端口，数据双向传输嘛，并且还有一个ACK确认信息，告诉客户端第一次握手成功，我已准备好接受数据。

第三次握手：最后一次握手表示客户端确认已收到服务端发送的确认信息，握手结束，可以准备发送数据

为啥需要三次握手？

谢希仁著《计算机网络》中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”。

五、发送http请求

建立了TCP连接之后，发起一个http请求。一个典型的http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法。

六、返回http响应

服务器接受并处理完请求，返回 HTTP 响应，一个响应报文格式基本等同于请求报文，由响应行(request line)、响应头(header)、响应主体三个部分组成。

七、页面渲染

浏览器收到服务器发送的响应头和响应体，进行客户端渲染，生成Dom树、解析css样式、js交互。

• 根据 HTML 解析出 DOM 树
• 根据 CSS 解析生成 CSS 规则树
• 结合 DOM 树和 CSS 规则树，生成渲染树
• 根据渲染树计算每一个节点的信息
• 根据计算好的信息绘制页面

八、断开连接

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

• 发起方向被动方发送报文，Fin、Ack、Seq，表示已经没有数据传输了。并进入 FIN_WAIT_1 状态。(第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧)
• 被动方发送报文，Ack、Seq，表示同意关闭请求。此时主机发起方进入 FIN_WAIT_2 状态。(第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧)
• 被动方向发起方发送报文段，Fin、Ack、Seq，请求关闭连接。并进入 LAST_ACK 状态。(第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧)
• 发起方向被动方发送报文段，Ack、Seq。然后进入等待 TIME_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复，则正常关闭。(第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)

通俗点理解就是：（可能不够专业，但是可以这样理解）

一次挥手：客户端表示我已经没有数据可以发送了，发送一个Fin要求关闭端口并发送ACK表示确认，请求客户端要求断开连接。（浏览器发起）

二次挥手：服务端收到客户端的断开请求，返回一个ACK表示同意关闭此请求（服务器发起）

三次挥手：此时服务端也要给客户端发送断开请求，发送一个ACK和Fin请求关闭连接。（服务器发起）

四次挥手：客户端收到服务端的断开请求后发送一个ACK确认关闭连接，这里的发起方客户端等待一定时间后未收到回复，就会正常关闭。（客户端发起）

参考文献：

输入一个url到浏览器页面展示都经历了哪些过程

从URL输入到页面展现到底发生了什么？

TCP三次握手详解及释放连接过程

前端经典面试题之一（浏览器输入url按下回车后发生了什么）

详解 TCP 连接的“ 三次握手 ”与“ 四次挥手 ”

三次握手和四次挥手的视频理解：

为什么三次握手四次挥手？序列号怎么来的？