浏览器缓存

目录

强缓存

Expires

Cache-control

协商缓存

协商缓存生效返回304Not Modified状态码

协商缓存失效，返回200和请求结果

Last-Modified和If-Modified-Since

ETag 和If-None-Match

Last-Modified和Etag的对比

缓存机制

实际使用场景

用户行为对浏览器的影响

---

浏览器缓存：缓解服务端的压力，并且获取缓存的速度很快。

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

强缓存

不会向服务器发送请求，直接从缓存中读取资源。控制台返回200的状态码，Size显示from memory cache，from disk cache。强缓存可以通过设置HTTP HEADER实现：expires和cache control

Expires

缓存过期时间，用来指定资源到期的时间，是服务端的具体时间点。Expires=max-age+请求时间，需要和Last-modified结合使用。Expires是web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。缺点：如果修改了本地时间，那么缓存可能过期需要再次请求。

Cache-control

当允许缓存的时候，在请求正确返回的max-age时间内，可以使用缓存而不用访问服务器。

public：表示响应可以呗客户端和代理服务器缓存

private：响应只可以被客户端缓存

max-age=30：缓存过期时间

s-maxage：覆盖max-age，只有在代理服务器中生效

no-store:不缓存任何响应

no-cache：资源被缓存但是立即失效，下次会发起请求验证资源是否过期。是否适用缓存要经过协商来验证。不用Cache-Control方式来做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。浏览器缓存，但是在使用缓存时需要确认缓存是否还和浏览器数据一致。

max-stale:在该时间内即使缓存过期也使用该缓存

min-fresh：希望在30秒内获取最新的响应

Expires和cache-control的区别：Expires是HTTP1.0的产物，Cache是HTTP1.1的产物。两者同时存在的话cache-control优先级高于Expires。

强缓存判断是否使用缓存的依据是缓存是否超出时间，而不关心服务器端是否已经更新，这可能会导致加载文件不是服务端最新的内容。可以使用协商缓存策略。

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务端发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

协商缓存生效返回304Not Modified状态码

协商缓存失效，返回200和请求结果

协商缓存可以通过设置两种HTTP Header实现：Last-Modified和ETag

Last-Modified和If-Modified-Since

浏览器在第一次访问资源时，服务器在返回资源的同时，在响应头添加了Last-Modified字段，该字段值为这个资源在服务器上的最后修改时间，浏览器接收后缓存资源和header

下一次请求这个资源的时候发现有Last-Modified这个header，于是在请求头添加If-Modified-Since字段，值就为保存的Last-Modified的值。服务器收到请求之后，会根据If-Modified-Since的值与服务器最后修改这个资源的时间对比，如果没有变化，返回304和空的响应体，直接从缓存中读取。如If-Modified-Since小于修改时间，于是返回200和新的资源文件。

缺点：如果本地修改打开了缓存资源，即使没有修改Last-Modified的值也会改变，导致缓存不能命中，重新发送资源。Last-Modified以秒计时，如果在1秒以内修改了资源，还是能命中缓存，返回错误的资源。

ETag 和If-None-Match

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成），只要资源有变化，Etag就会重新生成。浏览器下一次访问的时候会带上上次生成的Etag的值放在IF-NONE-MATCH字段中，判断ETAG是否一致就能判断是否资源被修改过。没修改返回304，修改返回新的资源和200。

Last-Modified和Etag的对比

精度：Etag>Last-Modified,Last-Modified时间单位是秒，秒以内的修改不敏感，Etag只要修改了就都能感知。

性能上：Etag<Last-Modified.Last-Modified记录的是时间，而Etag需要服务器通过算法来计算出一个hash值

优先级上：Etag>Last-Modified。服务器校验优先考虑Etag

缓存机制

强缓存优先于协商缓存，若强缓存不生效使用协商缓存。

实际使用场景

对于频繁变动的资源：

使用Cache-Control: no-cache，每次请求时都要在服务端进行校验验证资源是否有效。

不常变化的资源：

Cache-Control: max-age=31536000

给缓存配置一个很大的有效时间。解决更新问题：在文件或路径中添加hash，版本号等动态字符串，之后更新动态字符转，从而达到更改引用URL的目的。不再使用之前的强缓存。

用户行为对浏览器的影响

打开网页，地址栏输入地址：查找disk cache是否有匹配

普通刷新，因为tab没有关闭，使用memory cache，没有才disk cache

强制刷新：不适用缓存，cache control：no store。