vue浏览器关闭的时候缓存自动清除_浏览器原理

浏览器存储:

浏览器缓存

缓存按缓存

缓存位置 memory cache, disk cache, Service Worker 等

缓存请求头：Cache-Control, ETag 强缓存，对比缓存

memory cache:内存中的缓存，与之相对 disk cache 就是硬盘上的缓存)。按照操作系统的常理：先读内存，再读硬盘。disk cache 将在后面介绍 (因为它的优先级更低一些)，这里先讨论 memory cache。“短期存储”。常规情况下，浏览器的 TAB 关闭后该次浏览的 memory cache 便告失效 (为了给其他 TAB 腾出位置)。而如果极端情况下 (例如一个页面的缓存就占用了超级多的内存)，那可能在 TAB 没关闭之前，排在前面的缓存就已经失效了。

缓存到此位置的决定因素有哪些？

• memory cache和Cache-Control以及ETag 所有与缓存有关的请求头都无关
• preloader：<link rel="prefetch"> 一边解析js/css文件，一边网络请求下一个资源
• preload: <link rel="preload">。这些显式指定的预加载资源，也会被放入 memory cache 中。
• 关于一些静态文件，考虑如果是大文件，大概率并不会存内存，如果内存空闲，像css,js，img会存入内存。真心不想让一个资源进入缓存，就连短期也不行，那就需要使用no-store。存在这个头部配置的话，即便是 memory cache 也不会存储，自然也不会从中读取了。
• memory cache的状态码是200， 200 OK (from cache) 是浏览器没有跟服务器确认，直接用了浏览器缓存；而 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性，再用的缓存。200(from cache) 是速度最快的,因为不需要访问远程服务器,直接使用本地缓存.304 的过程是, 先请求服务器, 然后服务器告诉我们这个资源没变, 浏览器再使用本地缓存.

disk cache disk cache 也叫 HTTP cache，顾名思义是存储在硬盘上的缓存，因此它是持久存储的，是实际存在于文件系统中的。而且它允许相同的资源在跨会话，甚至跨站点的情况下使用，例如两个站点都使用了同一张图片。

disk cache 会严格根据 HTTP 头信息中的各类字段来判定哪些资源可以缓存，哪些资源不可以缓存；哪些资源是仍然可用的，哪些资源是过时需要重新请求的。当命中缓存之后，浏览器会从硬盘中读取资源，虽然比起从内存中读取慢了一些，但比起网络请求还是快了不少的。绝大部分的缓存都来自 disk cache。

关于 HTTP 的协议头中的缓存字段，我们会在稍后进行详细讨论。

凡是持久性存储都会面临容量增长的问题，disk cache 也不例外。在浏览器自动清理时，会有神秘的算法去把“最老的”或者“最可能过时的”资源删除，因此是一个一个删除的。不过每个浏览器识别“最老的”和“最可能过时的”资源的算法不尽相同，可能也是它们差异性的体现。

无名之辈：http​zhuanlan.zhihu.com

1 200 from memory cache和200 from disk cache和 304Not Modified有什么区别？

200 from memory cache

不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，也就是浏览器关闭以后，数据将不存在。

但是这种方式只能缓存派生资源。

200 from disk cache

不访问服务器，直接读缓存，从磁盘中读取缓存，当kill进程时，数据还是存在。

这种方式也只能缓存派生资源

304 Not Modified

访问服务器，发现数据没有 更新，服务器返回此状态码。然后从缓存中读取数据。

但是这里有困惑，怎么判断from memory cache还是304

三级缓存的原理

1. 先去内存看，如果有，直接加载
2. 如果内存没有，择取硬盘获取，如果有直接加载
3. 如果硬盘也没有，那么就进行网络请求
4. 加载到的资源缓存到硬盘和内存

所以我们可以来解释这个现象

图片为例：

访问-> 200 -> 退出浏览器 再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

2 什么时候from memory cache和from disk cache？？

浏览器图片加载是并行的么？再就是Js和CSS呢？是串行的？为什么在cdn就可以加速

https://blog.csdn.net/zqtsx/article/details/23666275浏览器的回收机制：
通常浏览器的回收机制有标记清除以及引用计数两种方式，当变量进入执行环境时候，垃圾回收器将其标记为进入环境，当变量离开环境，函数运行结束时候，将其标记为离开环境。垃圾回收器给内存中所有变量加上标记，然后去掉环境变量以及被环境中变量引用的变量，然后被回收。

在我们普通浏览器一般使用的是标记清除方法，老的版本的ie浏览器使用的是引用计数。

JavaScript 的事件机制