HTTP请求流程:为什么很多站点第二次打开速度会很快

136 阅读3分钟

HTTP协议建立在TCP连接基础之上。HTTP是一种允许浏览器向服务器获取资源的协议,是web的基础。

浏览器发起HTTP请求流程

1.构建请求

首先浏览器会构建请求行,构建好后,浏览器准备发起网络请求

GET /index.html HTTP1.1

2.查找缓存

浏览器缓存是一种在本地保存资源的副本,以供下次请求时直接使用的技术。

3.准备IP地址和端口

第一步浏览器会请求DNS返回域名对应的IP(浏览器还会提供DNS数据缓存服务),拿到IP之后需要知道对应端口号,没有特别指明端口号的话,默认是80端口。

4.等待TCP队列

chrome机制:同一域名下同时最多建立6个TCP连接,超过的请求会进入排队等待状态。

5.建立TCP连接

在HTTP工作开始之前,浏览器会通过TCP与服务器建立连接。

6.发送HTTP请求

浏览器会向服务器发送请求报文,包括请求方法,请求URI,HTTP版本协议

服务端处理HTTP请求流程

1.返回请求

可以通过工具软件curl查看返回请求数据

curl -i https://xxx.xxx.xx/

-i是为了返回响应行、响应头和响应体的数据。

2.断开连接

通常在服务器向客户端返回了请求数据就会关闭TCP连接

如果在头信息中加入了 Connection: Keep-Alive 那么TCP连接在发送后仍保持连接状态。保持连接状态可以省去下次请求时需要建立连接的时间,提升资源加载速度。

3.重定向

如果在浏览器打开 xxx1.xx.xx 但是最终打开的页面是 xxx2.xx.xx 这两个页面的url地址不一样,会涉及到重定向操作

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

很多站点在第二次打开时速度较快的原因主要与浏览器缓存机制有关。浏览器会缓存页面的静态资源(如图片、样式表、脚本等),以便在用户再次访问相同页面时不必重新下载这些资源,从而提高页面加载速度。

具体的缓存机制包括:

  1. 浏览器缓存: 浏览器会将已经下载的资源存储在本地缓存中,以便下次访问相同页面时可以直接从缓存中获取,而不需要再次从服务器下载。
  2. HTTP缓存头: 通过设置 HTTP 头部中的缓存控制(Cache-Control)和过期时间(Expires)等参数,开发者可以指定浏览器对静态资源的缓存策略。这可以减少对服务器的请求,提高页面加载速度。
  3. ETag: 服务器可以通过 ETag(Entity Tag)机制,为每个资源生成一个唯一的标识符。当客户端再次请求资源时,可以通过比较 ETag 是否匹配来确定是否使用缓存。如果资源没有发生变化,服务器可以返回状态码 304(Not Modified),告知客户端使用缓存。
  4. 本地缓存: 一些站点使用了Web Storage(如LocalStorage)或Session Storage等本地存储技术,将一些页面数据存储在客户端本地,以便下次访问时可以直接使用。

通过合理配置缓存策略,站点可以充分利用浏览器缓存,提高用户体验,减轻服务器负担。当用户再次访问站点时,浏览器会优先尝试从本地缓存中加载静态资源,从而减少网络请求和加速页面加载。