参考资源：
HTTP 缓存 MDN
服务端渲染与 Universal React App

浏览器存储

HTTP 请求是无状态的，一次连接关闭，使用 Cookie去维持客户端状态，维护用户的登录信息。服务端可以判断这个请求是来自哪个客户端。

总结两点功能：

用于浏览器端和服务器端的交互
客户端自身数据的存储

Cookie 存储的限制：

作为浏览器存储，大小 4kb 左右（存储数据能力被localstorage 替代）
需要设置过期时间 expire
httponly：当前这个 Cookie 只能用户 http 传输，而不能用 js 进行读写
Cookie中在相关域名下面 – CND 的流量损耗 - 在同一个域名下的所有请求，都会携带请求
- CDN 的域名和主站的域名要分开

LocalStorage

HTML5 设计专门用来浏览器存储的
大小为 5MB 左右
尽在客户端使用，不和服务端进行通信
接口封装较好
浏览器本地缓存方案

SessionStorage

会话级别的浏览器存储
大小为 5MB 左右
尽在客户端使用，不和服务端进行通信
接口封装较好
对于表单信息的维护

IndexDB

IndexDB 是一种低级 API，用于客户端存储大量结构化数据。该 API 使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于储存较少的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexDB 提供了解决方案。

为应用创建离线版本。

Service Workers 产生的意义

Service workers
本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。

Service workers是一个脚本。浏览器独立与当前网页，将其在后台运行，为实现一些不依赖页面或者用户交互的特性打开了一扇大门，在未来这些特性将包括推送消息，背景后台同步，geofencing（地理围栏定位），但他将退出的第一个首要特性，就是拦截和处理网络请求的能力，包括变成方式来管理被缓存的响应。

使用拦截网络请求的能力，可以实现离线应用。

PWA

PWA（Progressive Web APPs） 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写就能看出来，这事一个渐进式的 WebApp ，是通过一系列新的 Web 特性。配合优秀的 UI 交互设计，逐步的增强 Web APP 的用户体验。

可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现 “未连接到互联网”的页面。
快速：针对网页渲染及网路数据访问有较好的优化。
融入（Engaging）：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。

⚠️ lighthouse：chorm 扩展插件，检查网站性能，SEO 等

HTTP 缓存

重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。

浏览器存储、HTTP缓存、SSR