标签
前端/性能优化
字数
460 字
阅读时间
2 分钟
缓存可以减少网络 IO 消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。
HTTP 缓存
强缓存
- expires：绝对时间戳。比对客户端时间与 expires (服务器设置的时间戳)，确认是否需要走缓存
- cache-control 的 max-age: 相对的时间长度
- s-maxage: 代理服务器缓存（CDN 缓存）
- no-cache: 向服务器询确认资源是否过期
- no-store: 直接向服务器发送请求，下载完整的响应
协商缓存
浏览器向服务器询问缓存信息，进而判断是重新发起请求、下载完整的响应还是从本地获取缓存的资源
- Last-Modified: 服务器返回的文件最后修改的时间戳
- ETag-If-None-Match: 服务器返回的一个标识
MemoryCache 内存缓存
Service Worker Cache
Service Worker 是一个独立于主线程之外的javascript进程，无法直接操作DOM。可以实现离线缓存，消息推送和网络代理等功能。 Service Worker 的生命周期包括 install、active、working 三个阶段。一旦 Service Worker 被install，它将始终存在，只会在 active 与 working 之间切换，除非我们主动终止它。这是它可以用来实现离线存储的重要先决条件。
存储
cookie
- 缺点
- 大小限制为4Kb
- 同个域名的请求都会携带cookie，导致性能浪费
web storage
- LocalStorage 持久化本地存储
- SessionStorage 临时性本地存储，相同域名下的两个页面，在不同浏览器窗口下打开不共享
IndexedDB
运行在浏览器上的非关系型数据库