两种缓存位置
使用哪种缓存位置由浏览器内部机制决定
- from memory cache
从内存中获取，倾向于缓存更新频率较高的js、图片、字体等资源 - from disk cache
从磁盘中获取，倾向于缓存更新频率较低的js、css等资源
两种缓存方式
强缓存
缓存数据未失效的情况下直接使用浏览器的缓存数据而不像服务器发起请求，状态码总为200，在此期间服务器资源发生变化则前端无法获知
- Expires
在服务器端配置,为一个缓存截至时间点。 缺陷:客户端时间和服务端时间可能有误差 - Cache-Control
在服务器端配置,使用max-age=XXXXXX指定资源能被缓存的时长。
协商缓存
- 触发条件
当第一次请求时服务器返回的响应头中Cache-Control和Expires不存在或已过期或为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器端对比判断资源是否进行了修改更新。 - 对比方式
当服务器第一次向浏览器返回资源时，会在响应头中带上ETag(hash值)和Last-Modified(最后修改时间)。
浏览器下一次请求时会在请求头中带上与ETag对应的If-Not-Match(就是上一次接收到的ETag)，以及Last-Modified对应的If-Modified-Since(就是上一次接收到的Last-Modified)。服务器在接收到这两个参数后会做比较并返回结果。 - 返回结果
未更新则为304状态码，使用缓存。
已更新则为200状态码，服务器就会返回更新后的资源并且将新的缓存信息一起返回。
HTML如何配置缓存
上述缓存都是由服务器主动决定的，不受前端影响，前端想要控制缓存主要是在<head>标签中嵌入<meta>标签，这种方式只对页面有效，对页面上的资源无效
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Cache-Control" content="max-age=7200" />
网友评论