从输入URL到页面显示发生了什么

1，浏览器输入url

用户在浏览器输入url

2，查询浏览器缓存

如果访问过该URL，浏览器就会去缓存中查询相关资源并直接显示到页面，不进入网络请求（如果查询缓存后没有查询到相关资源，则仍然会进入网络请求流程）；如果没有访问过该URL，则进入网络请求流程（第3步）

查询缓存的流程：浏览器缓存 => 系统缓存 => 路由器缓存 => ISP DNS缓存 => 根域名递归查询

（1）浏览器缓存

浏览器通常会缓存记录一段时间，在2~30分钟不等，浏览器缓存内的查询顺序是：

service worker（运行在浏览器背后的独立线程。我们可以自由控制需要缓存哪些文件）=>

memory cache（内存中的缓存。主要包含当前页面抓取到的数据，比如样式、脚本、图片等，读取速度快，但如果关闭了tab页，则内存会被释放）=> 

disk cache（硬盘中的缓存。读取速度慢，但是覆盖面大，什么都可以存储。他主要根据HTTP header中的字段判断要缓存哪些文件) =>

push cache（推送缓存。http/2中的缓存，以上3种都没有查询到时，他才会被启用。他只在当前session会话中生效，只要关闭当前会话就会被清除。而且存储时间只有5分钟。）

（2）系统缓存

如果在浏览器缓存中没有查询到相关记录，浏览器就会查询系统中的缓存。

（3）路由器缓存

如果系统缓存中没有查询相关记录，就会将前面的查询请求发向路由器。

（4）ISP DNS缓存

以上3步都是客户端的DNS缓存。如果客户端的DNS缓存都没有查询到记录，则会进入ISP DNS缓存服务器中查询（在这里一般都能找到记录）。比如使用电信的网络，则会进入电信的ISP DNS缓存服务器中查询。

（5）从根域名服务器递归查询

如果以上没有查询到，会从根域名进行递归查询。

3，DNS解析

如果没有访问过URL，则先进行域名解析，获取对应的IP地址。

4，TCP3次握手

浏览器开始向服务器发起http请求，进行3次握手。

（1）第一次握手：浏览器告知服务器我将要发送数据，请做好准备。

        客户端发送一个带相关序号的（SYN、seq）数据包，告诉服务器我即将发送请求，且在链接中发送的初始序列号是SYN。

（2）第二次握手：服务器告知浏览器，我准备好了。

        收到消息后，服务器（ACK）确认浏览器的SYN数据包，告诉浏览器准备好了

（3）第三次握手：浏览器说收到，我要开始发了（理解为第2次的回执）

        浏览器确认服务器的ACK和SYN，并代表握手结束

5，发送http请求

链接成功后，浏览器根据IP地址和端口号发送http请求，请求的报文以流（stream）的形式发送。

报文由请求行（request line）、请求头（request header）、请求体（request body）组成，具体

6，服务器接收请求并响应

服务器接收到浏览器的http请求，并进行相关处理后，将响应数据返回给浏览器

7，浏览器接收响应数据并解析

浏览器收到服务器响应的数据，并进行解析，如果响应数据可以缓存，则存入缓存

8，浏览器渲染页面

浏览器接收到响应的html页面之后，就会从上到下加载，并在加载过程中进行解析渲染。

浏览器渲染页面的主要流程有：

（1）根据html解析生成dom树

（2）根据css解析生成css规则树

（3）结合dom树和css规则树，生成渲染树

（4）有了渲染树，浏览器已经知道每个节点和他的从属关系，然后进行Layout阶段，计算出每个节点的信息、位置

（5）遍历渲染树，根据每个节点的信息和位置绘制页面

9，断开连接

数据发送完毕之后，关闭tcp链接。