03宏观下的浏览器：HTTP请求流程——为什么很多站点第二次打开速度会很快？

1.浏览器端发起HTTP请求流程

2. 服务器端处理 HTTP 请求流程

3.为什么很多站点第二次打开速度会很快？

1.浏览器端发起HTTP请求流程

1. 构建请求
2. 查找缓存
3. 准备 IP 地址 和端口
4. 等待TCP 队列
5. 建立 TCP 连接
6. 发起HTTP请求

1-1 构建请求

// 首先构建请求行信息
GET /index.html HTTP/1.1

1-2 查找缓存

• 在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件
• 浏览器缓存是一种在本地保持资源的副本，以供下次请求时直接使用的技术
• 缓存查找失败，进入网络请求过程

浏览器缓存优点

1. 缓解服务器端压力，提升性能（获取资源的耗时更短了）
2. 缓存是实现网站快速加载的重要组成部分

1-3 准备 IP 地址和端口

HTTP 和 TCP 的关系

• HTTP 协议 作为应用层协议，用来封装请求的文本信息，并使用TCP 作为传输层协议发到网络上
• 所以在HTTP协议工作之前，浏览器需要通过TCP 与 服务器建立连接

网络请求过程

1. 由于HTTP协议工作之前需要TCP与服务器建立连接，而 TCP 和服务器建立连接的第一步是准备 IP 地址和端口号
2. DNS（域名系统）把 URL 地址的域名映射为 IP 地址，浏览器提供了DNS数据缓存服务：如果域名解析过了，浏览器就会缓存解析的结果（IP 地址），以供下次查询时直接使用，也会减少一次网络请求。
3. 获取端口号：没有指明端口号默认80端口

1-4 等待TCP 队列

• chome机制：同一域名最多同时建立6个 TCP 请求，超过部分进入排队等待队列
• 请求数量少于6个建立TCP连接

1-5 建立 TCP 连接

1-6 发送HTTP请求

• 一旦建立 TCP 连接，浏览器就可以和服务器进行通信了
• HTTP中的数据正是这个通信过程中传输的

2. 服务器端处理 HTTP 请求流程

1. 返回请求
2. 断开连接

3.为什么很多站点第二次打开速度会很快？

• DNS缓存
• 页面资源缓存

3-1 DNS缓存

在浏览器本地把对应的IP 和域名关联起来

页面资源缓存

1. 服务器端返回响应头给服务器，浏览器通过响应头中的Cache-Control 字段来设置是否缓存。

// 设置缓存过期实践 2000 秒
Cache-Control:Max-age=2000

2. 如果缓存过期，浏览器则会继续发起网络请求，并在HTTP请求头带上 If-None-Match: " "字段，服务器根据此字段值来判断请求资源是否更新。没有更新返回304，继续使用，更新的话返回新资源。