【JavaScript】浏览器的缓存策略:强缓存和协商缓存

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/AC_greener/article/details/88774429

通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置 HTTP Header 来实现的。

强缓存(如果命中就不会去请求服务器,返回状态码200)

如何设置强缓存?

1,设置http头:Cache-Control,以客户端相对时间为准

Cache-Control:max-age=3600(单位是秒)。

2,expires(http1.0产物)会将资源的实效日期告知客户端。
Expires 的一个缺点就是,返回的到期时间是服务器端的时间,这样存在一个问题,如果用户更改了本地时间,就有可能造成误差
在这里插入图片描述

当同时设置cache-control和expires时,会优先使用cache-control

协商缓存(如果资源没有做改变,那么服务端就会返回 304 状态码 Not Modify)

1,If-Modified-since(请求)Last-Modified (响应),
首次请求服务器会返回资源的更新时间,
以后请求会在请求头携带if-modified-since中带着这个时间,如果资源发生了更新,则返回新资源

2,If-None-Match(请求)和ETag (响应)
eg:
第一次客户端想服务器请求一个index.css,第一次响应时,服务器会在响应头添加: Etag: ‘value’
这个value一般是index.css的md5值。 value = md5(index.css)
第二次去请求index.css的时候浏览器会带着一个请求头: if-nont-match: ‘value’
服务器就可以在后台比对 if-nont-match请求头和上一次etag的区别:如果相同就返回304,Not Modify,如果不同就返回新的资源,并重新设置Etag的值

两者的区别:

在这里插入图片描述
Etag和Catche-Control的区别:
Etag再次请求了服务器,如果etag和if-none-match相等就不下载文件内容,强缓存如果命中,根本就不会发起请求

展开阅读全文

没有更多推荐了,返回首页