谈谈我对前端缓存的理解

本文主要讲解了前端缓存中的强缓存和协商缓存，与缓存相关的首部字段，缓存的不同位置及其之间的区别等。

为什么要使用缓存

使用缓存有如下优点：

• 减少冗余的数据传输
• 节省网络费用，缓解网络瓶颈问题
• 降低对原始服务器的要求，服务器可以更快响应，避免出现过载
• 降低距离时延

浏览器请求资源的过程

浏览器第一次请求资源：

• 本地无缓存数据
• 向服务器发送请求
• 从服务器获取资源，并协商缓存（是否缓存，获取资源的Expires、Cache-Control、Etag、Last-Modified等信息）
• 最后呈现页面。

浏览器进行再次请求：

• 先获取该资源缓存的header信息，判断是否命中缓存（根据cache-control和expires信息判断），若命中直接从缓存中获取资源信息，包括缓存header信息。本次请求不会与服务器进行通信。—— 强缓存
• 如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否缓存命中；若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。—— 协商缓存

以上可以看出强缓存与协商缓存的特点：

• 强缓存：直接使用本地的缓存，不用跟服务器进行通信
• 协商缓存：将资源一些相关信息返回给服务器，让服务器判断浏览器是否能直接使用本地缓存，整个过程至少与服务器通信一次

与强缓存相关的header字段（包含在响应报文中，服务器发来的）

与强缓存主要相关的首部字段有expires和cache-control：max-age=number。并且如果cache-control与expires同时存在的话，cache-control的优先级高于expires。下面对这两者进行详细的介绍：

• e