http缓存
强缓存
不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;
协商缓存
向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；
缓存头
定义
- 强制缓存缓存头： Expires：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。
Cache-Control：当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。
cache-control除了该字段外，还有下面几个比较常用的设置值：
-no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
-no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
-public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
-private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
- 协商缓存缓存头
Last-Modify/If-Modify-Since：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间（
精确到秒）；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存
Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。
If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存
区别
- ETag和Last-Modified的作用和用法，他们的区别：
1.Etag要优于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；
2.在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值；
3.在优先级上，服务器校验优先考虑Etag
延伸
- 为什么要有etag Etag比lastModified更加严谨，如果资源发生变化，Etag就会发生变化，就会把最新的资源给客户端返回去，而lastModified不识别s（秒）单位里的修改，所以如果资源在s（秒）单位里发生了修改，那lastModified也不会发生改变，这样如果只用了lastModified，客户端得到的资源就不是最新的；但是设定了Etag之后，每次客户端发出请求，服务端都会根据资源重新生成一个Etag，对性能有影响
浏览器缓存过程
1.浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存；
2.下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求
3.服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；；
4.如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200；
用户对缓存的影响
点击刷新按钮或者按F5（会走协商缓存）
浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match,这就意味着服务器会对文件检查新鲜度，返回结果可能是304，也有可能是200.
用户按Ctrl+F5（强制刷新）
浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是200.
memory cache与disk cache
内存缓存
字面理解是从内存中，其实也是字面的含义，这个资源是直接从内存中拿到的，不会请求服务器一般已经加载过该资源且缓存在了内存当中，当关闭该页面时，此资源就被内存释放掉了，再次重新打开相同页面时不会出现。
刷新页面的时候，图片,JS等资源大部分来源于内存缓存，跟http缓存头无关。
disk缓存
其实就是http缓存 通过http 协议来约定，由服务端来设置response header，此资源是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from disk cache
什么时候放在内存什么时候放在硬盘？
对于大文件来说，大概率是不存储在内存中的，反之优先 当前系统内存使用率高的话，文件优先存储进硬盘 频繁变动的放在内存中因为更快： 样式表一般在磁盘中，不会缓存到内存中去，因为css样式加载一次即可渲染出网页
但是脚本却可能随时会执行，如果脚本在磁盘当中，在执行该脚本需要从磁盘中取到内存当中来 图片字体之类的一般也是内存
localStorage/sessionStorag/cookie/session
localstorage设置过期时间
export default{
set(key,data,time){
let obj={
data=data,
ctime:(new Date()).getTime(),//时间戳，同Date.now()
express:1000*60*60//设置过期时间一个小时
}
localStorage.setItem(key,JSON.stringify(obj));
},
get(key){
let obj=JSON.parse(localStorage.getItem(key));
let getItem=(new Date()).getTime();
if(getItem-obj.ctime>=express){
localStorage.removeItem(key);
return null;
}else{
return obj.data;
}
}
}
local... vs session...
1、生命周期 —— 数据可以存储多少时间
- localStorage: 存储的数据是永久性的，除非用户人为删除否则会一直存在。
- sessionStorage: 与存储数据的脚本所在的标签页的有效期是相同的。一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删除。
2、作用域 —— 谁拥有数据的访问权
- localStorage: 在同一个浏览器内，
同源文档之间共享 localStorage 数据，可以互相读取、覆盖。 - sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此，sessionStorage 的作用域还被限定在了窗口中，也就是说，只有同一浏览器、同一窗口的同源文档才能共享数据。
session
Session是在无状态的HTTP协议下，服务端记录用户状态时用于标识具体用户的机制。它是在服务端保存的用来跟踪用户的状态的数据结构，可以保存在文件、数据库或者集群中。
登录机制
与Cookie的关系与区别：
1、Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中，Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
2、Cookie的安全性一般，他人可通过分析存放在本地的Cookie并进行Cookie欺骗。在安全性第一的前提下，选择Session更优。重要交互信息比如权限等就要放在Session中，一般的信息记录放Cookie就好了。
3、单个Cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个Cookie。
4、当访问增多时，Session会较大地占用服务器的性能。考虑到减轻服务器性能方面，应当适时使用Cookie。
5、Session的运行依赖Session ID，而Session ID是存在 Cookie 中的。也就是说，如果浏览器禁用了Cookie,Session也会失效（但是可以通过其它方式实现，比如在url中传递Session ID,即sid=xxxx）。
html5中的缓存控制
Cache Manifest
用于离线应用访问
做法：
1.让服务器能够识别manifest后缀的文件 2.创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本 离线应用访问及更新流程 第一次访问离线应用的入口页HTML（引用了manifest文件），正常发送请求，获取manifest文件并在本地缓存，陆续拉取manifest中的需要缓存的文件 再次访问时，无法在线离线与否，都会直接从缓存中获取入口页HTML和其他缓存的文件进行展示。如果此时在线，浏览器会发送请求到服务器请求manifest文件，并与第一次访问的副本进行比对，如果发现版本不一致，会陆续发送请求重新拉取入口文件HTML和需要缓存的文件并更新本地缓存副本
存在的问题
Manifest是用来做离线页面的，即使断网也能正常打开页面，用起来简单，但是在实际使用中存在以下问题：
（1）如何自动缓存所有的页面的资源？因为manifest不能使用*通配符进行cache
（2）如果网站资源更新，怎么让manifest文件自动更新？不然如果用户不清缓存即使联网也会加载老页面
逐步被service worker取代
我觉得很多网站没有使用Manifest是因为上面提到的两个原因，有些人有尝试过，但使用起来比较麻烦，离线应用价值好像不太大。但是使用Manifest还是有很多好处的，特别是像博客等之类的偏向于展示的网站，或者是在线APP，这种网站的数据动态变化频率比较低，不需要频繁地向服务请求数据。这样当用户需要频繁退回首页或者频繁地在几个页面来回切换的时候，由于几乎所有资源都在本地，所以加载起来是瞬时的。
service worker
简介
是一种特殊的webworker ，web worker这个api被造出来时，就是为了解放主线程。因为，浏览器中的JavaScript都是运行在单一个线程上，随着web业务变得越来越复杂，js中耗时间、耗资源的运算过程则会导致各种程度的性能问题。 而web worker由于独立于主线程，则可以将一些复杂的逻辑交由它来去做，完成后再通过postMessage的方法告诉主线程。 service worker则是web worker的升级版本，相较于后者，前者拥有了持久离线缓存的能力。
特点
-
独立于主线程、在后台运行的脚本
-
被install后就永远存在，除非被手动卸载
-
可编程拦截请求和返回，缓存文件。sw可以通过fetch这个api，来拦截网络和处理网络请求，再配合cacheStorage来实现web页面的缓存管理以及与前端postMessage通信。 实例：拦截所有出错的图片请求，替换图片的域名
-
不能直接操纵dom：因为sw是个独立于网页运行的脚本，所以在它的运行环境里，不能访问窗口的window以及dom。
-
必须是https的协议才能使用。不过在本地调试时，在http://localhost 和http://127.0.0.1 下也是可以跑起来的。
-
异步实现，sw大量使用promise。 实践
框架中的缓存
vue keepAlive
作用
能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。
场景
列表页跳转到详情页，详情页再返回列表页
- 问题：
如果对数据进行编辑之后再跳转回去需要刷新怎么办？
activated - 坑 1.页面params不一样也不会刷新
