前端面试:http缓存策略

1)缓存的介绍

①　缓存是什么?
保存资源副本并在下次请求时直接使用该副本的技术。当Web缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。
②　为什么需要缓存
减少不必要的网络请求,使得页面加载更快;
网络请求是不稳定,加大了页面加载的不稳定性;
网络请求的加载相比于cpu加载 & 页面渲染都要慢.
③　哪些资源可以被缓存?
静态资源 js css img ,
因为静态资源加上hash名打包后是不会修改的

2)http缓存策略(强制缓存+协商缓存) (常考点)

浏览器本身自带缓存机制

①　强制缓存:

服务器觉得资源可以被缓存才会加Cache-Control
(1) Cache-Control
在Response Headers 中,由服务器添加,客户端不可设置;
控制强制缓存的逻辑,再次请求发现有本地缓存,不使用网络,直接返回资源
max-age : 资源在多少秒内有效
no-cache : 不使用强制缓存,由服务端决定do what
no-store : 不使用强制缓存,服务端也不缓存,直接由服务端返回新资源
private : 只允许最终用户缓存
pubilc : 用户和中间的代理都能缓存资源

(2) expires
Response Headers ;表示资源的过期时间;已经被Cache-Control代替

②　协商缓存
它是服务端缓存策略: 即服务器判断客户端资源是否和服务端资源一样,一致则返回304(Not modified )使用本地缓存的资源 ,不一致则返回200和新资源 ;
过程: 浏览器初次请求,服务器返回资源和资源标识; 浏览器再次请求携带资源标识,服务器发现资源标识一样,返回304;

资源标识:
体积很小; 在Response Headers中, 有两种:
(1) Last-Modified : 资源的最后修改时间,
if-Modified-Since : 请求头中,==Last-Modified
(2) Etag : 资源的唯一标识(一个字符串,类似人类的指纹)
if-None-Match : 请求头中, ==Etag
前者比较时间;后者比较字符串;可以共存,但优先Etag,因为即使内容没有变,只要编辑了Last-modified就会更新,这样并不精准.

3)必须会画的图

4)刷新操作方式,对缓存的影响

不同的刷新方式,不同的缓存策略:

正常操作 : 地址栏输入url ,跳转链接,前进后退等 ; 两种缓存都有效
手动刷新 : F5 ,点击刷新按钮,右击菜单刷新 ; 仅协商缓存有效
强制刷新 : ctrl +f5 cmd + r ; 都无效

菜鸟一只,有不对的地方欢迎指正 . ☺
若有哪里没写明白,欢迎询问,会尽早回答. ☺

上面的图都是上课时的截图,来自双越老师.