浏览器缓存原理-Toy模板网

这篇具有很好参考价值的文章主要介绍了浏览器缓存原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用 HTTP 缓存的好处：通过复用缓存资源，减少了客户端等待服务器响应的时间和网络流量，同时也能缓解服务器端的压力。可以显著的提升网站的应用性能。

HTTP 缓存策略分为两种：强制缓存、协商缓存。

强制缓存

浏览器缓存没有过期的时候可以直接决定使用缓存。
强制缓存可以通过两种响应头设置实现：
Expires和Cache-Control。

注意*：如果两个同时存在，Cache-Control优先级高于Expires。

浏览器缓存原理
Expires：设置过期时间。

流程：浏览器发出请求，服务器在返回资源的时候，会在响应头里添加expires这个字段，其值就是过期时间，浏览器拿到值之后就可以判断缓存有没有过期，如果没有过期，浏览器就直接获取缓存数据。如果过期返回新的数据和新的过期时间。

Cache-Control：设置过期时长，值为多少秒，相比过期时间就准确多了。

流程：浏览器发出请求，服务器在返回资源的时候，会在响应头里添加Cache-Control这个字段，其值就是过期时间，浏览器拿到值之后就可以判断缓存有没有过期，如果没有过期，浏览器就直接获取缓存数据。如果过期返回新的数据和新的过期时间。

协商缓存

每次请求需要让服务器判断一下资源是否更新过，从而决定浏览器是否使用缓存，如果是，则返回 304，否则重新完整响应返回200.

Last-Modified：值为最后修改时间。

流程：浏览器发送请求，然后服务器在返回资源的时候，在响应头里添加last-modified这个字段值为服务器资源的最后修改时间，然后浏览器在每次请求的时候都会带上上一次返回的最后修改时间，之后交给服务器，服务器拿到值去跟服务器当前的最后修改时间去做比对，如果比对没变化就告诉浏览器可以使用缓存并返回304状态，如果比对结果是资源已经更新了就给浏览器正常返回资源并返回状态200。

浏览器缓存原理
问题点：Last-Modifie是以秒级别记录的，如果资源正好在1秒内发生改变的话，Last-Modifie是无感知的，会以为没有变化，这样就出现问题了。

Etag:是服务器为每份资源生成的唯一标识，就像一个指纹，资源变化都会导致 ETag 变化，跟最后修改时间没有关系，ETag可以保证每一个资源是唯一的.

流程：浏览器发送请求，服务器根据文件内容生成唯一的标识，然后这个标识通过Etag字段值传给浏览器，浏览器以后每次请求的时候都会增加一个字段叫If-None-Match值为Etag的值，服务器拿到这个值会跟服务器当前的Etag做比对，比对没变化告诉浏览器可以用缓存返回304，如果比对结果已经更新了则返回新的资源并返回状态200.文章来源地址https://www.toymoban.com/news/detail-426753.html

到了这里，关于浏览器缓存原理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！