缓存

1.四种缓存位置

Service Worker
- 实现原理
  - 通过 HTTPS 请求拦截来实现缓存功能，没有命中时，才会调用 fetch 获取数据
  - 可以自由控制如何匹配缓存，如何读取缓存，缓存什么文件
- 使用三步骤
  - 注册 Service Worker
  - 监听 install 事件，然后缓存需要的文件
下次访问时，拦截请求，查询是否有符合条件的缓存条目，有的话直接读取
Memory Cache
- 实现原理
  - 把当前页面已经请求过的资源，放到内存中
- 有一个重要用途是存放<link rel="prefetch">下载的资源
- 一旦关闭 tab 页面，内存缓存就被释放了
Disk Cache
- 实现原理
  - 通过 Header 中的字段，判断需要缓存的资源，放到磁盘中
Push Cache
- 实现原理
  - 服务器主动向浏览器提前推送资源，作为缓存
- 是 HTTP2 中的内容，优先级在前面三种缓存之后

2. 三种缓存类型

强缓存

特点
- 本地自己判断缓存是否有效，判定有效就不会跟服务器沟通，大大减小服务器的负担
通过两种响应头实现
- Expires
  - HTTP/1.0 产物
  - 表示资源在此数值日期后过期，根据本地时间进行判定，有可能失效（绝对时间），例如值可取 Fri,24 Sep 2027 03:00:00 GMT,表示 2027 年 9 月 24 日的 GMT 时间 3 点过期
- Cache-Control
  - HTTP/1.1 产物
  - 优先级比 Expires 高，表示资源会在一定秒数后过期（相对时间），例如值可取max-age=36000，表示 10 小时后过期
命中强缓存时
- 能看到 http 返回码是 200，但是 Size 列值为 from cache

【问】nginx 中如何配置？

location / {
    add_header Cache-Control max-age=36000

    或者针对某种后缀的资源配置：
    if($request_filename ～* ^.*?\.(gif|jpg|jpeg|png|bmp|swf)$){
        add_header Cache-Control max-age=36000
    }
}

协商缓存

特点
- 会和服务器沟通，服务器说有效就会发送 304 Not Modify，否则发新资源
通过两种方式实现
- Last-Modified
  - HTTP/1.0 产物
  - 值表示本地文件最后修改日期(绝对时间，由第一次请求时服务器发送过来）
  - 当第二次请求服务器时，会通过If-Modified-Since属性将这个值发给服务器来判断。
  - 缺点
    - 如果本地打开了缓存文件会造成值被修改，就不会更新了，而且秒级精度下若 1 秒改多次将不会有效，而且对于内容不变的定期生成文件也无法缓存
- ETag
  - HTTP/1.1 产物
  - 值相当于文件的指纹(由第一次请求时服务器发送过来）
  - 当第二次请求服务器时，会通过If-None-Match属性将这个值发给服务器判断，判断该资源是否更新过（更新过后 ETag 会变）。优先级比 Last-Modified 要高

离线缓存

特点
- H5 的新增特性，可以把需要离线缓存的文件，列入到 manifest 配置文件中，即使没联网用户也能看到网页

加上属性

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

网站服务器根目录新建文件 cache.manifest，写入如下内容

CACHE MANIFEST
//表示版本，可以更新
#V0.11


//表示需要缓存的资源列表(引入此文件的html会自动缓存，不用写)
CACHE:
css/style.css
../images/banner-02-png


//表示只有在线才能访问的资源列表
NETWORK:
js/app.js

//表示如果访问第一个资源(./表示根目录下任意资源)失败了，就用第二个资源去替换
FALLBACK:
./ ./offline.html