web页面的缓存方式, 加载页面的优化？

页面缓存分为

强缓存 —— expires: 绝对时间 、 cache-control：相对时间
协商缓存 ——
Last-modify【web服务器在响应请求时，告诉浏览器资源的最后修改时间】
If-Modified-Since【当资源过期时（强缓存失效），发现资源具有Last-Modified声明，
则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间】

Etag 【web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）】
If-None-Match 【当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，
则再次向web服务器请求时带上头If-None-Match （Etag的值）】

两者的区别：【强缓存】不需要发送请求到服务，【协商缓存】需要发送请求到服务器。

首次请求一定会向服务器发起请求，进行首次资源的缓存
第二次访问由于有了缓存，根据 http header：

1. 是否命中强缓存，【命中强缓存】，浏览器直接从自己的缓存中读取资源，不会发请求到服务器
2. 【没有命中强缓存】，浏览器一定会发送一个请求到服务器：
   2.1 通过服务器端依据资源的另外一些 http header 验证这个资源是否命中协商缓存，
   2.1.1【命中协商缓存】服务器会将这个请求返回（304），但是不会返回这个资源的数据，
   而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；
   2.1.2【未命中协商缓存】，则将资源返回客户端，并更新本地缓存数据。

P W A 实现离线缓存 —— Progressive Web App，即渐进式WEB应用
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用.
随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装 和 离线等功能。
service worker 实现离线缓存 —— Service Workers 就像介于服务器和网页之间的拦截器，
Service Workers 的强大在于它们拦截 HTTP 请求的能力
进入任何传入的 HTTP 请求，并决定想要如何响应。
在你的 Service Worker 中，可以编写逻辑来决定想要缓存的资源，
以及需要满足什么条件和资源需要缓存多久。