浏览器缓存

最新推荐文章于 2024-03-11 15:03:18 发布

一苇以航-橘子

最新推荐文章于 2024-03-11 15:03:18 发布

阅读量137

点赞数

分类专栏：笔记文章标签： web 缓存

本文链接：https://blog.csdn.net/jurongchao/article/details/97638749

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

对于一个网站来讲，缓存的重要性不言而喻，当一个网站足够大的时候，往往很注重用户体验的问题，而当一个网站用户足够多的时候服务器是否能承受住高并发所带来的压力。针对上述两种情况，缓存的存在就有其一定的理由了。
浏览器缓存分很多种：HTTP缓存，cookie ，sessionStorage，localStorage。

cookie
其实cookie存在的价值并不在于浏览器缓存。发明cookie的作者最早期是为了解决服务器无法知道请求的客户端身份的问题。
我们可以在客户端进行cookie设置，然后我们每次向服务器发出请求的时候都会默认的带上cookie（fetch请求除外）这样的话，服务器就会根据不同的用户来返回不同的数据了。

cookie 分为持久cookie 和会话cookie

会话cookie：，会话窗口关闭后，cookie就自动清除，并不会长期存储在浏览器中。
持久cookie：，在设置cookie的时候加上 expires 绝对过期时间，或者max-age，相对过期时间，会在指定时间之后清除cookie。

sessionStorage，localStorage
这两个东西就是完全为了缓存来自服务器数据。两者共同点诸多。

相同点
1: 大小 5M左右
2: 仅用作本地数据存储，不会参与服务器与客户端通信
不同点
localstorage是永久有效且多个页面共享（只要不删除）而sessionStorage则是尽在当前会话窗口有效，

HTTP缓存
http缓存机制有两种：强缓存，协商缓存；
二者区别点在于，强缓存会依据http请求头中的字段去判断缓存是否在有效期内，如果如果是在有效期，且命中抢缓存，则从缓存中拿数据并不会发起http请求，协商缓存则是当强缓存未命中时，与服务器进行连接，服务器会判断请求头中的字段，来判断是否命中协商缓存，如果命中，则返回304，浏览器从缓存中拿数据。

强缓存：

Expires ：该字段会返回一个时间，比如Expires:Thu,31 Dec 2037 23:59:59 GMT。这个时间代表着这个资源的失效时间，也就是说在2037年12月31日23点59分59秒之前都是有效的，即命中缓存。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当客户端本地时间被修改以后，服务器与客户端时间偏差变大以后，就会导致缓存混乱。于是发展出了Cache-Control。
Cache-Control：Cache-Control是一个相对时间，例如Cache-Control:3600，代表着资源的有效期是3600秒。由于是相对时间，并且都是与客户端时间比较，所以服务器与客户端时间偏差也不会导致问题。
Cache-Control与Expires可以在服务端配置同时启用或者启用任意一个，同时启用的时候Cache-Control优先级高。
- Cache-Control 可以由多个字段组合而成，主要有以下几个取值：
  - max-age 指定一个时间长度，在这个时间段内缓存是有效的，单位是s。例如设置 Cache-Control:max-age=31536000，也就是说缓存有效期为（31536000 / 24 / 60 * 60）天，第一次访问这个资源的时候，服务器端也返回了 Expires 字段，并且过期时间是一年后
  - s-maxage 同 max-age，覆盖 max-age、Expires，但仅适用于共享缓存，在私有缓存中被忽略。
  - public 表明响应可以被任何对象（发送请求的客户端、代理服务器等等）缓存。
  - private 表明响应只能被单个用户（可能是操作系统用户、浏览器用户）缓存，是非共享的，不能被代理服务器缓存。
  - no-cache 强制所有缓存了该响应的用户，在使用已缓存的数据前，发送带验证器的请求到服务器。不是字面意思上的不缓存。
  - no-store 禁止缓存，每次请求都要向服务器重新获取数据。
  - must-revalidate指定如果页面是过期的，则去服务器进行获取。这个指令并不常用，就不做过多的讨论了。

协商缓存：
若未命中强缓存，则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码为304，浏览器从缓存中加载资源。

Last-Modify/If-Modify-Since：
浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间，当浏览器再次请求该资源时，发送的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。
ETag/If-None-Match
与Last-Modify/If-Modify-Since不同的是，Etag/If-None-Match返回的是一个校验码（ETag: entity tag）。ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化*。ETag值的变更则说明资源状态已经被修改。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。