强缓存与协商缓存
强缓存与协商缓存
- 1、http缓存
-
- 1.1、强缓存
-
- 1.1.1、强制缓存的header属性（Pragma/Cache-Control/Expires）
- 1.1.2、Cache-Control的常用选项
- 1.2、协商缓存（对比缓存）
-
- 1.2.1、Last-Modified
- 1.2.2、ETag
- 1.3、强缓存与协商缓存对比
1、http缓存
http缓存：当用户端向服务器发起请求资源时，会先抵达浏览器缓存，如果浏览器有“要求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。
http缓存都是从第二次请求开始。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器去判断这些请求，命中强缓存就直接否200，否则就把请求参数加到request header头中传给服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源。
常见的http缓存只能缓存get请求响应的资源。
1.1、强缓存
浏览器在第一次向服务器发送请求时，若服务器觉得该资源需要缓存，这是服务器就会在响应头reaponse-header里面添加一个cache-control，如设置max-age，这样浏览器就会在本地缓存中存下相应的文件。
在浏览器下一次请求同样的文件时，浏览器就会检查max-age有没有过期，如果没有过期，就直接从本地缓存里获取资源，不会向服务器再次发起请求，这样就会提升页面的加载速度，如果max-age过期了，name浏览器又会向第一次一样去向浏览器发起请求。一旦使用强缓存，且没有过期，就不会再向浏览器发起请求。
这种方式页面加载速度是最开的，性能也很好的。但是在这期间，如果服务器端的资源修改了，页面上是拿不到最新的资源的，因为它不会再向服务器发送请求了，而是直接使用本地缓存的数据。这种情况就是我们在开发中经常遇到的。比如你修改了页面上的某个样式，页面刷新了但是没有生效，就是走的强缓存，所以进行强制刷新（ctrl+F5）就好了
form memory cache代表使用内存中的缓存，from disk cache代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory—>disk。在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需要直接从内存缓存中读取（from memory cache）；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存（from disk cache）
1.1.1、强制缓存的header属性（Pragma/Cache-Control/Expires）
浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息，本次请求根本就不会与服务器进行通信。
- expries：这是http1.0的规范。它的值为一个绝对时间的GMT格式的时间字符串，如Mon,10 Jun 2015 21:31:24 GMT，如果发送请求的时间在expries之前，那么本地缓存是在有效，否则就会发送请求到服务器来获取资源。
- cache-control：这是http1.1出现的header信息，主要是利用该字段的max-age值来进行判断，它是一个相对值，浏览器第一次的请求时间和Cache-Control设置的有效期，计算出这个资源过期时间，再拿到这个过期事件跟当前的时间进行比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行；Cache-Control的设置与否在于服务器，都是在服务端设置的，前端不需要做任何事情。
1.1.2、Cache-Control的常用选项
| 选项 | 解释 |
|---|---|
| max-age=100 | 缓存100s后过期，资源缓存在本地 |
| no-cache | 不使用本地缓存。使用协商缓存，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证 ，如果资源未被更改，则可以避免重新下载 |
| no-store | 所有内容都不会被缓存，既不使用强制缓存也不适用协商缓存，每次用户请求该资源，都会向服务器发送一个请求，服务器再返回资源 |
| public | 可以被所有的用户缓存，包括客户端和代理服务器 |
| private | 只能被客户端缓存，不允许CDN等中继缓存服务器对其缓存 |
| s-maxage | 覆盖max-age，作用域max-age一样，但只用于代理服务器中缓存 |
如果cache-control与expries同时存在的话，cache-control的优先级高于expries
1.2、协商缓存（对比缓存）
协商缓存就是强制缓存失效后，浏览器携带缓存标志向服务器发起请求，由服务器根据缓存标识觉得是否使用缓存的过程。
当浏览器再次发起请求该资源时，浏览器向服务器发送请求和资源标识，服务器这时就会去判断当前请求的资源浏览器本地缓存的版本跟服务器里面资源最新的版本是否一致；
- 如果版本一致，服务器返回304状态码，重定向让浏览器直接在本地缓存里拿到资源。
- 如果版本不一致，服务器返回200状态码、最新的资源以及新的资源标识，浏览器更新本地缓存。
- 资源标识
- Last-Modified/If-Modified-Since：指资源上一次修改的时间
- ETag/If-None-Match：资源对应的唯一字符串
服务器会为每个资源生成唯一的标识字符串，只要文件内容不同，它们对应的ETag就是不同的；If-Modified-Since能检测到的精度是秒级的，某些服务器不能精确的得到文件的最后修改时间，我们编辑了文件，但文件的内容没有改变，因为服务器是根据文件的最后的修改时间判断的 ，导致重新请求所以才出现了ETag，ETag对服务器也有性能损耗Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后CIA觉得是否返回304。
1.2.1、Last-Modified
在浏览器第一次请求时，服务器返回资源和资源标识符Last-Modified（在响应头中）
1.2.2、ETag
优先随时用ETag，原因如下：
- Last-Modified的值只能精确到秒级
- 文件如果每隔一段时间就重复生成，但内容相同，或者是内容修改了很多次最终与上一次文件的内容一直，但这也改变了Last-Modified的值。使用Last-Modified的话每次返回资源文件，即使内容一致。但ETag可以判断出文件内容相同，就会使用缓存，而不用向服务器发送请求了。
1.3、强缓存与协商缓存对比
| &emap; | 强缓存 | 协商缓存 |
|---|---|---|
| 缓存存放位置 | 本地浏览器 | 本地浏览器 |
| http状态码 | 200 | 304 |
| 谁来决定 | Pragma Cache-Control Expried |
Last-Modified/If-Modified-Since ETag/If-None-Match |
| 操作是否有效 | 1、Ctrl+F5强制刷新-----无效 2、F5刷新----无效 3、地址栏回车----有效 4、页面链接跳转—有效 5、新开窗口-----有效 6、前进、后退----有效 |
1、Ctrl+F5强制刷新-----无效 2、F5刷新----有效 3、地址栏回车----有效 4、页面链接跳转—有效 5、新开窗口-----有效 6、前进、后退----有效 |