浏览器缓存可以减少网络延迟，提高网页的访问速度，减少带宽消耗，降低服务器压力等，极大的提升了用户体验。

 

什么是浏览器缓存？

浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。

 

先来看个简略示意图：

 

 

 

浏览器的缓存机制先判断当前缓存是否过期，再去判断服务器文件是否改动。

 

若当前缓存未过期可以使用，那么状态码直接返回200，请求也不会发，network中size为（from memory cache）；

若过期则去判断文件是否改动，改动了重新拉取新文件，请求服务器返回200；无改动，则接着使用缓存的文件，状态码为304，network中size为（from memory cache）；

 

判断缓存过期

可通过请求头中的 Expires、Cache-Contorl 来实现。后者优先级高于前者。

 

no-cache:  不管服务端是否设置cache-control, 都必须重新去获取请求

 

max-age = 0: 不管response，先检验e-tag/last-modified

 

在资源无修改时，上述都返回304，no-store才是不去缓存

 

判断文件是否更改

e-tag / last-modified

当第一次请求某一个文件的时候，会传递回来 Last-Modified 字段，是这个文件的修改时间。当文件缓存过期，浏览器又请求这个文件时，会自动带请求头 If-Modified-Since 字段，其值是上一次传递过来的 Last-Modified 的值，同服务器中文件的最后修改时间做对比，如果相等，返回304让浏览器读过期缓存。如果不等则重新拉取。

 

cache-control  / expires

Cache-Control与Expires，都为当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

 

Cache-Control/Expires则不同，如果检测到本地的缓存还是有效的时间范围内，浏览器直接使用本地副本，不会发送任何请求。两者一起使用时，Cache-Control/Expires的优先级要高于Last-Modified/ETag。即当本地副本根据Cache-Control/Expires发现还在有效期内时，则不会再次发送请求去服务器询问修改时间（Last-Modified）或实体标识（Etag）了。

 

一般情况下，使用Cache-Control/Expires会配合Last-Modified/ETag一起使用，因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时，浏览器会忽略缓存继续向服务器发送请求，这时Last-Modified/ETag将能够很好利用304，从而减少响应开销。

Last-Modified与ETag

你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

 

Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度

如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存

有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

用户操作行为与缓存

 

 

 

完 ~

 

　

 

原文链接：https://blog.csdn.net/kkdelta/article/details/100576096