Skip to content

【浏览器】缓存 #19

Open
Open
@swiftwind0405

Description

@swiftwind0405

image

各类缓存技术优缺点

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接口使用更方便

浏览器缓存

浏览器处理缓存的策略流程图:
image

通常浏览器缓存策略分为两种:强缓存和协商缓存

image

基本原理:

  • 1)浏览器在加载资源时,根据请求头的 expirescache-control 判断是否命中强缓存,是则直接从缓存读取资源,不会发请求到服务器。
  • 2)如果没有命中强缓存,浏览器一定会发送一个请求到服务器,通过 last-modifiedetag 验证资源是否命中协商缓存,如果命中,服务器会将这个请求返回,但是不会返回这个资源的数据,依然是从缓存中读取资源
  • 3)如果前面两者都没有命中,直接从服务器加载资源

强缓存

Expires

ExpiresHTTP/1.0 控制网页缓存的字段。其值为服务器返回该请求结果缓存的到期时间,即如果发生时间在 Expires 之前,那么本地缓存始终有效,否则就会发送请求到服务器来获取资源;是绝对时间

Cache-Control

Cache-ControlHTTP/1.1 新增的规则,用于控制网页缓存的字段。
image

Expires & Cache-Control

Cache-ControlExpires 同时存在的话(如下图),Cache-Control 优先级高于 Expires
因为 Expires 时间返回的是服务器绝对时间,而客户端本地时间是可以修改的(时区不同等),造成服务器与客户端时间发生误差,强缓存会直接失效。而 Cache-Control 是相对时间,每次参照客户端第一次请求时间计算而来的,故不会受到影响;毕竟 Cache-ControlHTTP/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-ModifiedETag 是可以一起使用的),服务器会优先验证 ETag ,一致的情况下,才会继续比对 Last-Modified,最后才决定是否返回 304 Not Modified

ETag 可以解决 Last-Modified 存在的一些问题,既生 Last-Modified 何生 ETag ?

  • 文件内容不更改,但修改时间发生改变,这时候不希望客户端认为这个文件修改了。
  • 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说 1S 内修改了 N 次),If-Modified-Since 能检查到的粒度是 S 级的,这种修改无法判断;
  • 某些服务器不能精确的得到文件的最后修改时间。

参考资料

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions