缓存&PWA实践

从上一篇《前端动画实现与原理分析》，我们从 Performance 进行动画的性能分析，并根据 Performance 分析来优化动画。但，前端不仅仅是实现流畅的动画。ToB 项目会经常与数据的保存、渲染打交道。例如开发中，为了提高用户体验，遇到了一些场景，其实就是在利用某些手段，来进行性能优化。

• Select 下拉：做前端分页展示 → 避免一次性渲染数据造成浏览器的假死状态；
• indexedDB：存储数据 → 用户下一次进入时，保存上一次编辑的状态 ……

那不免引发思考，我们从缓存与数据存储来思考，该如何优化？

是什么？

Http 缓存其实就是浏览器保存通过 HTTP 获取的所有资源，
是浏览器将网络资源存储在本地的一种行为。

请求的资源在哪里？

1. 6.8kB + 200 状态码： 没有命中缓存，实际的请求，从服务器上获取资源；
2. memory cache: 资源缓存在内存中,不会请求服务器，一般已经加载过该资源且缓存在内存中，当关闭页面时，此资源就被内存释放掉了；
3. disk cache: 资源缓存在磁盘中，不会请求服务器，但是该资源也不会随着关闭页面就释放掉；
4. 304 状态码：请求服务器，发现资源没有被更改，返回 304 后，资源从本地取出；
5. service worker： 应用级别的存储手段；

1. 浏览器加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存。如果命中，则不会像服务器发送请求，而是直接从缓存中读取资源。
3. 强缓存可以通过设置 HTTP Header 来实现：
   http1.0 → Expires: 响应头包含日期/时间， 即在此时候之后，响应过期。
   http1.1 → Cache-Control:max-age=: 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间