浏览器缓存

2024年5月21日 77次阅读 来源: 若诗倪

浏览器缓存

浏览器缓存分为强缓存和协商缓存

  1. 强缓存

    客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源的同时，告诉客户端将这个资源保存在本地，并且在未来的某个时点之前如果还需要这个资源，直接从本地获取就可以，不用向服务器请求，这种方式缓存下来的资源称为强缓存。

    强缓存利用http的返回头部中的Expires(实体首部字段)或者Cache-Control(通用首部字段)两个字段来控制，用来表示资源的缓存时间。

    1. 服务器通过这两个首部字段告知客户端资源的缓存过期时间和缓存最大生命周期。
    2. 客户端得知资源的缓存过期时间和最大生命周期后，即可自行判断是否可不建立与服务器的链接，直接从浏览器缓存中获取资源。
注：命中强缓存时，浏览器同样会收到status=200的respones,chrome中可通过size区分从服务器返回的资源还是强缓存获得的资源。

(1). Expires(http1.0的规范)

其值为一个绝对时间的GMT格式的时间字符串，代表缓存资源的过期时间，在该时点之前，即为命中缓存。

缺点：服务器返回的Expires时点是服务器上的时间，可能与客户端有时间差，时间差太大可能造成缓存混乱

(2). Cache-Control:max-age(http1.1的规范)

强缓存利用其max-age值来判断资源缓存的最大生命周期，它的值单位为秒。Cache-Control:max-age=3600代表资源有效时间为1小时，即从第一次获取该资源起一小时内的请求都被认为可命中强缓存。

注：Cache-Control描述的是相对时间，采用本地时间来计算资源的有效期，所以相比Expires更可靠

这两个Header可以只用其一，也可以一起使用。一起使用时以Cache-Control为准
  1. 协商缓存

    客户端第一次问服务器要某个资源时，服务器丢给客户端所请求的这个资源的同时，将该资源的一些信息(文件摘要、或最后修改时间)也返回给客户端，告诉客户端将这个资源缓存在本地。当客户端下一次需要这个资源时，将请求以及相关信息（文件摘要、或者最后修改时间）一并发送给服务器，由服务器来判断客户端缓存的资源是否需要更新：如不需要更新，就直接告诉客户端获取本地缓存资源；如需要更新，则将最新的资源连同相应的信息一并返回给客户端。

    当强缓存未命中时，浏览器就会发送请求到服务器，服务器会验证协商缓存是否命中，如果协商缓存命中，请求返回的http状态为304，并会显示说明Not Modified，浏览器收到该返回后，就会从缓存中加载了。

    协商缓存利用[Last-Modified , If-Modified-Since] 和 [ETag , If-None-Match]这两对Header来管理。

(1). Last-Modified & If-Modified-Since

Last-Modified为实体首部字段，值为资源最后更新时间，随服务器response返回。

If-Modified-Since为请求首部字段，通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存，浏览器从缓存中获取资源；如果有过修改，则服务器返回资源，同时返回新的Last-Modified时间

(2). ETag & If-None-Match

ETag为相应头部字段，表示资源内容的唯一标识，随服务器response返回

If-None-Match为请求头部字段，服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存，浏览器从缓存中获取资源；如果有过修改，则服务器返回资源，同时返回新的ETag

协商缓存管理:

    [Last-Modified , If-Modified-Since]和[ETag , If-None-Match]一般同时启用，这是为了处理Last-Modified不可靠的情况。
    原文作者：若诗倪
    原文地址: https://segmentfault.com/a/1190000012541176
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞