本文主要讲解了前端缓存中的强缓存和协商缓存,与缓存相关的首部字段,缓存的不同位置及其之间的区别等。
为什么要使用缓存
使用缓存有如下优点:
- 减少冗余的数据传输
- 节省网络费用,缓解网络瓶颈问题
- 降低对原始服务器的要求,服务器可以更快响应,避免出现过载
- 降低距离时延
浏览器请求资源的过程
浏览器第一次请求资源:
- 本地无缓存数据
- 向服务器发送请求
- 从服务器获取资源,并协商缓存(是否缓存,获取资源的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