数据请求可分为三个步骤， （1）发起网络请求——>（2）后端处理——>（3）服务器响应，前端缓存可在第一个和第三个步骤中优化步骤，假如请求的数据本地存在，那就不用发送请求，假如前端数据与后端存储数据相比没有改变，那服务端响应就无须返回数据，这样就减少了响应数据。
因此前端缓存可缩短网页请求资源的距离，减少延迟，并且缓存的文件，可重复利用，还可减少带宽，降低网络负荷。
按照缓存策略划分，前端缓存主要可分为http缓存、浏览器缓存
HTTP缓存
http缓存可分为强缓存和协议缓存，强缓存不发送请求到服务器，协商缓存发送请求到服务器。
基本原理：
浏览器在请求资源时，会先根据响应头的Expires和Cache Control判断是否命中强缓存，如果命中，则直接从本地缓存中读取数据，若未命中，会发送请求到服务器，通过Etag和Last-Modified验证是否命中协商缓存，若命中协商缓存，服务器返回请求，但不返回资源，资源从缓存中读取，若未命中，则从服务器加载资源。
强缓存和协商缓存若命中，均是从客户端缓存中读取数据。
强缓存
Expires
Expires表示资源过期时间，它是服务器返回的一个绝对时间，即再次发起请求时，若客户端的时间小于Expires的值，直接使用缓存数据。但Expires受限于本地时间，若本地时间修改或受时区影响，客户端与服务端有一方的时间不准确，就会导致时间产生误差，进而导致Expires失效。
Expires: Wed, 11 May 2019 07:20:00 GMT
Cache-Control
为了弥补Expires的缺陷，HTTP1.1新加了Cache-Control，它优先级高于Expires，Cache-Control表示的是一个相对时间。
在无法确定客户端时间与服务端时间是否一致时，Cache-Control是一个更好的选择，若两者同时存在，则只有Cache-Control生效。
Cache-Control参数介绍：
public: 所有内容都将被缓存（客户端和代理服务器都可缓存）
private: 所有内容只有发起请求的客户端可以缓存，Cache-Control的默认取值
no-cache: 客户端缓存，但是否使用缓存需要经过协商缓存向服务器验证（为了防止从缓存中获取过期数据）
no-store: 所有内容都不缓存，既不使用强缓存，也不使用协商缓存，所有内容都从服务器获取
max-age=<seconds>: 缓存失效时间，相对时间，缓存将在XXX秒后失效，最大不超过一年
下图是一个强缓存的例子，若命中强缓存，状态码为200 OK +(缓存位置）
缓存存放在哪里？如何判断缓存是否生效？
如上图所示，灰色的状态码200表示使用了缓存数据，请求对应的size值则表示了该缓存存放的位置，memory cache和disk cache，memory cache代表使用了内存中的缓存，disk cache表示使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory——>disk——>服务器请求。
memory cache:不访问服务器，已经加载过该资源并且缓存在了内存中，直接从内存中读取缓存，浏览器关闭之后，数据就不存在了，再次打开相同页面，也不会出现from memory cache;
disk cache:不访问服务器，已经加载过该资源，直接从硬盘中读取数据，关闭浏览器后，数据依然存在，次资源不会随着该页面的关闭而被释放掉，下次打开相同页面，依然是from disk cache.
协商缓存
当强缓存失效时，会向服务器发送请求，与服务器协商，服务器根据缓存标识判断是否可以使用缓存，若可以使用则返回304，不再返回资源，从本地缓存中读取资源，如资源不相同，返回200和资源，然后更新返回头信息。
协商缓存有两种方式Last-Modified和Etag。
Last-Modified
表示资源的上次修改时间，配合If-Modified-Since使用。
浏览器请求资源时，服务器响应返回资源，且响应头中带有Last-Modified，该字段表示资源修改时间，下次浏览器再请求资源时，会在请求头中带着If-Modified-Since字段，该字段的值是上次请求返回的Last-Modified的值，服务器收到请求时，通过对比看资源是否发生过改变，若时间相同，则说明资源未被重新修改过，服务器返回一个304，通知浏览器资源未更新可直接从缓存中取数据。
Etag
Etag是一个数据签名（资源对于内容产生的唯一签名，是服务器生成的一段hash字符串），配合If-None-Match使用。
浏览器请求资源时，服务器对当前资源返回Etag，它是服务器生成的的一个唯一标识，下次浏览器再次请求该资源时，会携带If-None-Match字段，服务器会将If-None-Match字段值与服务器中的Etag值做对比，一致则返回304，表示资源未更新，可使用缓存文件；不一致则重新返回资源文件，状态码为200。
Etag与Last-Modified的区别
（1）有些服务器不能精确的得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新；
（2）Last-Modified只能精确到秒；
（3）有些资源的最后修改时间改变了，但内容并未改变，使用Last-Modified看不出内容是否改变；
（4）Etag的精度比Last-Modified高，属于强验证，要求资源字节级别的一致，优先级高于Last-Modified。
浏览器缓存
浏览器缓存可以分为小容量缓存和大容量缓存。
小容量缓存主要包括cookie、localStorage和sessionStorage；
cookie
由于http是无状态的，一旦提交完成之后，服务器与浏览器之间的连接就会关闭，再次交互时需要重新建立连接，这样无法确认用户信息。cookie就被用来主要存放用户信息。
基本流程：客户端访问服务器端，若服务器端需要记录该用户的状态，就在response时向客户端发送一个Set-Cookie，客户端就会把该cookie保存起来，当客户端再次访问服务器时，客户端会在请求头中带上cookie；服务器接收到请求之后，分解cookie，验证信息，成功后返回response给客户端。
cookie特性：
（1）cookie大小只有4KB，保存在浏览器端；
（2）cookie一般由服务器端生成，若在浏览器端生成cookie，默认是关闭浏览器后失效；
（3）cookie每次都会被携带在http头中，会被传输到服务器端；
（4）存储形式是字符串。
localStorage和sessionStorage
本地存储，只能存储在客户端，不会被传输到服务器端。
特性：
（1）sessionStorage是会话级别从存储，一旦窗口或标签被关闭，数据就会被清空；localStorage是持久化存储，除非主动删除数据，否则数据会一直存在，他俩的主要区别是生命周期不同；
（2）大小均为5MB；
（3）存储形式是键值对。
常用API（以localStorage举例，sessionStorage类似）：
（1）存储数据 setItem
localStorage.setItem('name', 'Lily');
（2）读取数据 getItem
localStorage.getItem('name'); //'Lily'
（3）移除 removeItem
localStorage.removeItem('name')；
（4）移除所有
localStorage.clear();
注意：
（1）webStorage存储的数据是明文存储，不能用于存储重要信息。
（2）不同浏览器之间无法共享webStorage中的信息，同一浏览器的相同域名或端口的不同页面可以共享相同的localStorage，但不同页面之间不能共享sessionStorage的信息。
大容量存储包括WebSql和IndexDB
WebSql
关系型数据库，W3C已于2010年宣布舍弃，使用SQL语言。
IndexDB
非关系型数据库
特性：
（1）以键值对形式存储，所有类型的数据都可直接存入，包括js对象；
（2）存储空间大；
（3）有同源限制
demo http://www.zhangxinxu.com/study/201707/indexeddb-example.html
浏览器数据库 IndexedDB 入门教程 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
