HTTP缓存：图解详解和实用指南

前端

2023-09-19 14:50:14

前言

HTTP缓存是一种网络技术，用于存储和重用以前请求的数据。它可以提高网站的性能并减少带宽使用量。

HTTP缓存的工作原理如下：

当浏览器第一次访问一个网站时，它会将网站上的资源（例如HTML、CSS、JavaScript文件）下载到本地计算机。
当浏览器再次访问同一个网站时，它会首先检查本地计算机上是否有这些资源的缓存副本。如果有，则直接从本地计算机加载资源，而不向服务器发送请求。
如果本地计算机上没有资源的缓存副本，则浏览器会向服务器发送请求。服务器会将资源发送给浏览器，浏览器会将资源下载到本地计算机并保存为缓存副本。

HTTP缓存可以显著提高网站的性能。当浏览器从本地计算机加载资源时，不需要向服务器发送请求，因此可以节省大量的时间。此外，HTTP缓存还可以减少带宽使用量，因为浏览器不需要重复下载已经缓存过的资源。

HTTP缓存的类型

HTTP缓存分为两种类型：

强缓存： 强缓存是指浏览器在不向服务器发送请求的情况下直接从本地计算机加载资源。强缓存通常用于缓存静态资源，例如HTML、CSS和JavaScript文件。
协商缓存： 协商缓存是指浏览器在向服务器发送请求之前先检查本地计算机上是否有资源的缓存副本。如果有，则浏览器会向服务器发送一个请求，询问资源是否已经被修改。如果资源没有被修改，则服务器会返回一个304（未修改）状态码，浏览器会从本地计算机加载资源的缓存副本。如果没有，则服务器会将资源发送给浏览器，浏览器会将资源下载到本地计算机并保存为缓存副本。

HTTP缓存控制

HTTP缓存控制是指使用HTTP头来控制资源的缓存行为。常用的HTTP缓存控制头包括：

Cache-Control： Cache-Control头用于控制资源的缓存行为。它可以指定资源的缓存时间、是否允许浏览器缓存资源以及是否允许浏览器在离线状态下使用资源。
Expires： Expires头用于指定资源的过期时间。如果资源的过期时间已过，则浏览器将不会从本地计算机加载资源，而是向服务器发送请求。
Last-Modified： Last-Modified头用于指定资源的最后修改时间。如果浏览器本地计算机上的资源的缓存副本的最后修改时间早于服务器上的资源的最后修改时间，则浏览器会向服务器发送请求，获取最新的资源。
ETag： ETag头用于指定资源的唯一标识符。如果浏览器本地计算机上的资源的缓存副本的ETag与服务器上的资源的ETag不同，则浏览器会向服务器发送请求，获取最新的资源。

HTTP缓存的注意事项

在使用HTTP缓存时，需要注意以下几点：

HTTP缓存可能会导致浏览器显示旧的内容。 如果资源已经过修改，但浏览器本地计算机上的资源的缓存副本的最后修改时间早于服务器上的资源的最后修改时间，则浏览器会从本地计算机加载资源的缓存副本，而不是向服务器发送请求，获取最新的资源。
HTTP缓存可能会导致浏览器无法访问资源。 如果资源已经过修改，但浏览器本地计算机上的资源的缓存副本的ETag与服务器上的资源的ETag不同，则浏览器会向服务器发送请求，获取最新的资源。但是，如果服务器上的资源已经不存在，则浏览器将无法访问该资源。
HTTP缓存可能会导致浏览器无法使用离线资源。 如果资源已经被缓存，但浏览器当前处于离线状态，则浏览器无法从本地计算机加载资源的缓存副本。

TCP三次握手

TCP三次握手是指在TCP协议中建立连接的三个步骤。这三个步骤如下：

客户端发送SYN包。 客户端向服务器发送一个SYN（同步）包。SYN包中包含客户端的初始序号（ISN）。
服务器发送SYN-ACK包。 服务器收到客户端的SYN包后，会向客户端发送一个SYN-ACK（同步确认）包。SYN-ACK包中包含服务器的初始序号（ISN）和客户端的初始序号（ISN）加1。
客户端发送ACK包。 客户端收到服务器的SYN-ACK包后，会向服务器发送一个ACK（确认）包。ACK包中包含服务器的初始序号（ISN）加1。

TCP三次握手完成后，客户端和服务器之间就建立了连接。

结论

HTTP缓存是一种网络技术，用于存储和重用以前请求的数据。它可以提高网站的性能并减少带宽使用量。HTTP缓存控制是指使用HTTP头来控制资源的缓存行为。在使用HTTP缓存时，需要注意以下几点：HTTP缓存可能会导致浏览器显示旧的内容、HTTP缓存可能会导致浏览器无法访问资源、HTTP缓存可能会导致浏览器无法使用离线资源。TCP三次握手是指在TCP协议中建立连接的三个步骤。