Description
各类缓存技术优缺点
1、cookie
优点:对于传输部分少量不敏感数据,非常简明有效
缺点:容量小(4K),不安全(cookie被拦截,很可能暴露session);原生接口不够友好,需要自己封装;需要指定作用域,不可以跨域调用
2、Web Storage
容量稍大一点(5M),localStorage可做持久化数据存储支持事件通知机制,可以将数据更新的通知发送给监听者
缺点:本地储存数据都容易被篡改,容易受到XSS攻击
缓存读取需要依靠js的执行,所以前提条件就是能够读取到html及js代码段,其次文件的版本更新控制会带来更多的代码层面的维护成本,所以LocalStorage更适合关键的业务数据而非静态资源
Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
3、indexDB
IndexedDb提供了一个结构化的、事务型的、高性能的NoSQL类型的数据库,包含了一组同步/异步API,这部分不好判断优缺点,主要看使用者。
4、Manifest(已经被web标准废除)
优点
- 可以离线运行
- 可以减少资源请求
- 可以更新资源
缺点
- 更新的资源,需要二次刷新才会被页面采用
- 不支持增量更新,只有manifest发生变化,所有资源全部重新下载一次
- 缺乏足够容错机制,当清单中任意资源文件出现加载异常,都会导致整个manifest策略运行异常
Manifest被移除是技术发展的必然,请拥抱Service Worker吧
5、PWA(Service Worker)
这位目前是最炙手可热的缓存明星,是官方建议替代Application Cache(Manifest)的方案作为一个独立的线程,是一段在后台运行的脚本,可使web app也具有类似原生App的离线使用、消息推送、后台自动更新等能力
目前有三个限制(不能明说是缺点)
- 不能访问 DOM
- 不能使用同步 API
- 需要HTTPS协议
localStorage,sessionStorage和cookie的区别
- 共同点:都是保存在浏览器端、且同源的
- 区别:
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
- 存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的
- web Storage支持事件通知机制,可以将数据更新的通知发送给监听者
- web Storage的api接口使用更方便
浏览器缓存
通常浏览器缓存策略分为两种:强缓存和协商缓存
基本原理:
- 1)浏览器在加载资源时,根据请求头的
expires
和cache-control
判断是否命中强缓存,是则直接从缓存读取资源,不会发请求到服务器。 - 2)如果没有命中强缓存,浏览器一定会发送一个请求到服务器,通过
last-modified
和etag
验证资源是否命中协商缓存,如果命中,服务器会将这个请求返回,但是不会返回这个资源的数据,依然是从缓存中读取资源 - 3)如果前面两者都没有命中,直接从服务器加载资源
强缓存
Expires
Expires
是 HTTP/1.0
控制网页缓存的字段。其值为服务器返回该请求结果缓存的到期时间,即如果发生时间在 Expires
之前,那么本地缓存始终有效,否则就会发送请求到服务器来获取资源;是绝对时间
Cache-Control
Cache-Control
是 HTTP/1.1
新增的规则,用于控制网页缓存的字段。
Expires & Cache-Control
Cache-Control
与 Expires
同时存在的话(如下图),Cache-Control
优先级高于 Expires
。
因为 Expires
时间返回的是服务器绝对时间,而客户端本地时间是可以修改的(时区不同等),造成服务器与客户端时间发生误差,强缓存会直接失效。而 Cache-Control
是相对时间,每次参照客户端第一次请求时间计算而来的,故不会受到影响;毕竟 Cache-Control
是 HTTP/1.1
新增的规范
协商缓存
Last-Modified
Last-Modified: Wed, 21 Nov 2018 05:46:58 GMT
If-Modified-Since: Wed, 21 Nov 2018 05:46:58 GMT
ETag
Etag 是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)。
ETag: "d5d-55b192d5e0640"
If-None-Match: "d5d-55b192d5e0640"
Last-Modified & Etag
Last-Modified
与 ETag
是可以一起使用的),服务器会优先验证 ETag
,一致的情况下,才会继续比对 Last-Modified
,最后才决定是否返回 304 Not Modified
。
ETag 可以解决 Last-Modified
存在的一些问题,既生 Last-Modified
何生 ETag
?
- 文件内容不更改,但修改时间发生改变,这时候不希望客户端认为这个文件修改了。
- 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说
1S
内修改了N
次),If-Modified-Since
能检查到的粒度是S
级的,这种修改无法判断; - 某些服务器不能精确的得到文件的最后修改时间。