前端之浏览器缓存机制
通俗地讲，缓存可以分为HTTP缓存和本地缓存
HTTP缓存又可以分为强缓存和协商缓存
强缓存即
不会向服务器发送请求，直接从缓存中读取资源
请求返回200的状态码
在chrome控制台的network选项中可以看到size显示from disk cache或from memory cache。
from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
Expires和Cache-Control两者对比：其实这两者差别不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires
设置强缓存
1.expires(http/1.0,时间格式GMT)
表示相应头里的过期时间,浏览器再次加载资源时如果在时间之内在命中缓存。
2.cache-control(http/1.1,单位 秒)
max-age(表示缓存内容在 xx秒后消失)
no-cache(要根据协商缓存是否需要缓存客户端)
no-store(所有内容都不会被缓存)
public(所有内容都将被缓存包括客户端和代理服务器)
private(所有内容只有客户端可以缓存)
s-maxage(只用于共享缓存和max-age效果一样,只是max-age 用于普通缓存)
协商缓存
当协商缓存生效时,返回304和Not Modified
它指的是强制缓存失效后,浏览器携带缓存标示向服务器发起请求,由服务器决定是否需要使用缓存。
1.Last-Modified和 If-Modified-Since
Last-Modifeds是服务器返回资源同时在header添加的,表示这个资源在服务器上最后修改时间,浏览器接受后缓存文件和header。
浏览器下次请求时，检测是否有Last-Modified字段,如果存在则在请求头添加 If-modified-Since该字段值就是上次服务器返回的值
如果没有变化则返回304直接从缓存中读取，否则返回新资源
2.ETag和If-None-Match
Etag是上一次加载资源时,服务器返回的。它的作用是唯一用来标示资源是否有变化。
浏览器下次请求时将ETag值传入If-None-Match中,服务端匹配传入的值与上次是否一致，如果一致返回304否则返回新资源和新的ETag
两种协商缓存的对比
1.首先在精确度上，Etag要优于Last-Modified，Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。
2.性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
3.优先级上，服务器校验优先考虑Etag
本地缓存
本地存储主要有以下几种,localStorage、sessionStorage、cookie、websql、indexDB.
1.localStorage
在前端设置,可以减少数据请求，长期存储。
2.sessionStorage
在前端设置，只存在当前会话中即重新打开浏览器则数据消失
3.cookie
在后端设置,保存在客户端本地文件,通过set-cookie设置且Cookie的内容自动在请求的时候被传递到服务器。
4.indexDB
为浏览器提供本地数据库,提供查找接口,还能建立索引 。
indexDB详细解释：（来自阮一峰老师博客-浏览器数据库 IndexedDB 入门教程）
通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
IndexedDB 具有以下特点。
（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以”键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。