前端缓存机制提升网站性能 - Service Worker

PWA 简介

PWA（Progressive Web Apps）不是特指某一项技术，而是应用多项技术来改善用户体验的 Web App，为 Web App 提供类似 Native App 的用户体验。
其核心技术包括 Web App Manifest，Web Push，Service Worker 和 Cache Api 等，用户体验才是 PWA 的核心。

PWA 主要特点如下：

可靠 - 即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现
用户体验 - 快速响应，具有平滑的过渡动画及用户操作的反馈
用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验

写在前面

文章不具体讲解 PWA 技术细节，如果对 PWA 技术感兴趣，文末准备了一些资料，可以参考学习
此次调研目的并非为网站完整接入 PWA 技术，而是利用其缓存机制提升网站性能
主要用到的技术为 Service Worker + Cache Api

前端多级缓存模型

当浏览器想要获取远程的数据时，我们并不会立即动身（发送请求），在计算机领域，很多性能问题都会通过增加缓存来解决，前端也不例外。
和许多后端服务一样，前端缓存也是多级的。

本地读取阶段，这个阶段我们不会发起任何 HTTP 请求，只在本地读取数据作为响应
HTTP request 阶段，这个阶段我们发起了 HTTP 请求，但是数据依然是从本地读取。目前为止，我们可能还没有发出一个真正的请求。这也意味着，在缓存检查阶段我们就会有很多机会将后续的性能问题扼杀在摇篮之中
真正请求阶段，如果很不幸本地没有任何有效数据，这时候才会发起真正的请求
前端多级缓存详细流程图如下：