HTTP缓存和浏览器缓存

旧城等待， 2022-11-12 02:48 269阅读 0赞

HTTP缓存分为强缓存和协商缓存，浏览器缓存常见的有cookie、localStorage和sessionStorage

## HTTP缓存 ##

### 强缓存 ###

强缓存整体流程比较简单，就是在第一次访问服务器取到数据之后，在过期时间之内不会再去重复请求。实现这个流程的核心就是如何知道当前时间是否超过了过期时间。

强缓存的过期时间通过第一次访问服务器时返回的响应头获取。在 `http 1.0` 和 `http 1.1` 版本中通过不同的响应头字段实现。

在 `http 1.1` 版本中，强制缓存通过 `Cache-Control` 响应头来实现。`Cache-Control` 拥有多个值：

*  private：客户端可以缓存
 *  public：客户端和代理服务器均可缓存；
 *  max-age=xxx：缓存的资源将在 xxx 秒后过期；
 *  no-cache：需要使用协商缓存来验证是否过期；
 *  no-store：不可缓存

最常用的字段就是 `max-age=xxx` ，表示缓存的资源将在 xxx 秒后过期。一般来说，为了兼容，两个版本的强制缓存都会被实现。

**总结：**强制缓存只有首次请求才会跟服务器通信，读取缓存资源时不会发出任何请求，资源的 `Status` 状态码为 `200`，资源的 `Size` 为 `from memory` 或者 `from disk` ，http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。

### 协商缓存 ###

协商缓存与强制缓存的不同之处在于，协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识。在第一次请求服务器时，服务器会返回资源，并且返回一个资源的缓存标识，一起存到浏览器的缓存数据库。当第二次请求资源时，浏览器会首先将缓存标识发送给服务器，服务器拿到标识后判断标识是否匹配，如果不匹配，表示资源有更新，服务器会将新数据和新的缓存标识一起返回到浏览器；如果缓存标识匹配，表示资源没有更新，并且返回 `304` 状态码，浏览器就读取本地缓存服务器中的数据。

在 http 协议的 `1.0` 和 `1.1` 版本中也有不同的实现方式。

在 `http 1.1` 版本中，服务器通过 `Etag` 来设置响应头缓存标识。`Etag` 的值由服务端生成。在第一次请求时，服务器会将资源和 `Etag` 一并返回给浏览器，浏览器将两者缓存到本地缓存数据库。在第二次请求时，浏览器会将 `Etag` 信息放到 `If-None-Match` 请求头去访问服务器，服务器收到请求后，会将服务器中的文件标识与浏览器发来的标识进行对比，如果不相同，服务器返回更新的资源和新的 `Etag` ，如果相同，服务器返回 `304` 状态码，浏览器读取缓存。

**总结：**协商缓存每次请求都会与服务器交互，第一次是拿数据和标识的过程，第二次开始，就是浏览器询问服务器资源是否有更新的过程。每次请求都会传输数据，如果命中缓存，则资源的 `Status` 状态码为 `304` 而不是 `200` 。同样的，一般来讲为了兼容，两个版本的协商缓存都会被实现，`http 1.1` 版本的实现优先级会高于 `http 1.0` 版本的实现。

## 浏览器缓存 ##

cookie、localStorage和sessionStorage的区别：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

### cookie ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3][]

cookie有哪些字段：

*  Name：cookie的名字
 *  Value：cookie的值
 *  Domian：cookie生效的域名
 *  Path：cookie生效的路径，根路径/就表示在这个域名的任何网页下都能生效
 *  Expires/Max-Age：标明了cookie的有效期
 *  Size：标明了cookie所占的变量大小
 *  http字段：cookie的httponly属性。若为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie

JS通过document.cookie查看cookie

JS不能操作cookie，但能添加cookie，它会拼接在cookie后面进行累加，例如document.cookie = ‘k1=100；’进行添加cookie

1、HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储  
2、cookie的构成：  
名称：name(不区分大小写,但最好认为它是区分的)  
值:value(通过URL编码:encodeURIComponent)  
域  
路径  
失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间  
安全标志:设置安全标志后只有SSL连接的时候才发送到服务器  
3、cookie的作用:主要用于保存登录信息  
4、生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题  
5、cookie的优点：具有极高的扩展性和可用性  
通过良好的编程，控制保存在cookie中的session对象的大小  
通过加密和安全传输技术，减少cookie被破解的可能性  
只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失  
控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie  
6、cookie的缺点：  
cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉  
安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用  
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221022/5ef1e34c22fb4560aed1c17a21635921.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/66a8bd4d74ed45efac7a346b62f8f941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221022/43be68feac064114b1b258d6ed88f45b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3]: /images/20221022/d833a13b4ec3496fb5299e8a1d362a0f.png