We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
优点:对于传输部分少量不敏感数据,非常简明有效
缺点:容量小(4K),不安全(cookie被拦截,很可能暴露session);原生接口不够友好,需要自己封装;需要指定作用域,不可以跨域调用
容量稍大一点(5M),localStorage可做持久化数据存储支持事件通知机制,可以将数据更新的通知发送给监听者
缺点:本地储存数据都容易被篡改,容易受到XSS攻击
缓存读取需要依靠js的执行,所以前提条件就是能够读取到html及js代码段,其次文件的版本更新控制会带来更多的代码层面的维护成本,所以LocalStorage更适合关键的业务数据而非静态资源
Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
IndexedDb提供了一个结构化的、事务型的、高性能的NoSQL类型的数据库,包含了一组同步/异步API,这部分不好判断优缺点,主要看使用者。
优点
缺点
Manifest被移除是技术发展的必然,请拥抱Service Worker吧
这位目前是最炙手可热的缓存明星,是官方建议替代Application Cache(Manifest)的方案作为一个独立的线程,是一段在后台运行的脚本,可使web app也具有类似原生App的离线使用、消息推送、后台自动更新等能力
目前有三个限制(不能明说是缺点)
浏览器处理缓存的策略流程图:
通常浏览器缓存策略分为两种:强缓存和协商缓存
基本原理:
expires
cache-control
last-modified
etag
Expires 是 HTTP/1.0 控制网页缓存的字段。其值为服务器返回该请求结果缓存的到期时间,即如果发生时间在 Expires 之前,那么本地缓存始终有效,否则就会发送请求到服务器来获取资源;是绝对时间
Expires
HTTP/1.0
Cache-Control 是 HTTP/1.1 新增的规则,用于控制网页缓存的字段。
Cache-Control
HTTP/1.1
Cache-Control 与 Expires 同时存在的话(如下图),Cache-Control 优先级高于 Expires。 因为 Expires 时间返回的是服务器绝对时间,而客户端本地时间是可以修改的(时区不同等),造成服务器与客户端时间发生误差,强缓存会直接失效。而 Cache-Control 是相对时间,每次参照客户端第一次请求时间计算而来的,故不会受到影响;毕竟 Cache-Control 是 HTTP/1.1 新增的规范
Last-Modified: Wed, 21 Nov 2018 05:46:58 GMT If-Modified-Since: Wed, 21 Nov 2018 05:46:58 GMT
Etag 是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)。
ETag: "d5d-55b192d5e0640" If-None-Match: "d5d-55b192d5e0640"
Last-Modified 与 ETag 是可以一起使用的),服务器会优先验证 ETag ,一致的情况下,才会继续比对 Last-Modified,最后才决定是否返回 304 Not Modified。
Last-Modified
ETag
304 Not Modified
ETag 可以解决 Last-Modified 存在的一些问题,既生 Last-Modified 何生 ETag ?
1S
N
If-Modified-Since
S
The text was updated successfully, but these errors were encountered:
2万字 | 前端基础拾遗90问
Service Worker 和Web Worker类似,是独立的线程,我们可以在这个线程中缓存文件,在主线程需要的时候读取这里的文件,Service Worker使我们可以自由选择缓存哪些文件以及文件的匹配、读取规则,并且缓存是持续性的
Memory Cache 即内存缓存,内存缓存不是持续性的,缓存会随着进程释放而释放
Disk Cache 即硬盘缓存,相较于内存缓存,硬盘缓存的持续性和容量更优,它会根据HTTP header的字段判断哪些资源需要缓存
Push Cache 即推送缓存,是HTTP/2的内容,目前应用较少
看这篇文章:浏览器缓存机制剖析
Sorry, something went wrong.
浏览器缓存机制剖析 | louis blog 动画:深入浅出从根上理解 HTTP 缓存机制及原理!
No branches or pull requests
各类缓存技术优缺点
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被移除是技术发展的必然,请拥抱Service Worker吧
5、PWA(Service Worker)
这位目前是最炙手可热的缓存明星,是官方建议替代Application Cache(Manifest)的方案作为一个独立的线程,是一段在后台运行的脚本,可使web app也具有类似原生App的离线使用、消息推送、后台自动更新等能力
目前有三个限制(不能明说是缺点)
localStorage,sessionStorage和cookie的区别
浏览器缓存
浏览器处理缓存的策略流程图:
通常浏览器缓存策略分为两种:强缓存和协商缓存
基本原理:
expires
和cache-control
判断是否命中强缓存,是则直接从缓存读取资源,不会发请求到服务器。last-modified
和etag
验证资源是否命中协商缓存,如果命中,服务器会将这个请求返回,但是不会返回这个资源的数据,依然是从缓存中读取资源强缓存
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
ETag
Etag 是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)。
Last-Modified & Etag
Last-Modified
与ETag
是可以一起使用的),服务器会优先验证ETag
,一致的情况下,才会继续比对Last-Modified
,最后才决定是否返回304 Not Modified
。ETag 可以解决
Last-Modified
存在的一些问题,既生Last-Modified
何生ETag
?1S
内修改了N
次),If-Modified-Since
能检查到的粒度是S
级的,这种修改无法判断;参考资料
The text was updated successfully, but these errors were encountered: