1、web缓存

客户端浏览器在显示一个完整网页前，需要去服务器获取一些必要的数据（js,css,image等），因为浏览器的数据处理和渲染速度很快，而通过网络传输的方式去服务器取数据的过程却很慢。如果把已经获取过的资源存在本地，下次用的时候就不用从服务器去取了，这样速度就要快很多了。这种机制便是web缓存。

web缓存的优点：  减轻服务器压力；减少数据传输；节省网络带宽和流量；缩短页面加载时间，提升用户体验。

2、web缓存分类

缓存是一个抽象的代名词，用以提高访问效率而临时存储副本的机制都可以称之为缓存。我们常说的缓存，根据资源存放位置、具体用途和运行机制不同，一般可以分为：

1）数据库缓存

在复杂的大型应用，数据库的数据表众多，数据量大，在做数据查询时需要花费一定的时间和大量的性能，所以为了避免频繁的数据查询，数据库服务器会将查询到的数据暂存在内存中，下次有相同数据查询时可以直接从内存中返回，极大的提高了性能和效率。常见的数据库缓存技术有memcache和redis。

2）服务器缓存

又称为缓存代理服务器或者代理缓存，是存在于客户端和源服务器之间的一种中间服务器，这种代理服务器接收多个客户端的数据请求，属于公有缓存，这种缓存能大量减少多个客户端相同的资源请求，有效降低源服务器的负载压力。

3）客户端缓存

客户端缓存一般指的是浏览器缓存，即浏览器端将符合规范条件的资源存储在客户端本地的一种存储机制。浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

3、浏览器缓存

1）http缓存

http协议缓存，浏览器根据http协议头部的特殊控制字段来控制资源缓存的机制。

强缓存 Expires / Cache-Control

浏览器对于强缓存的处理：根据第一次请求资源时返回的响应头来确定的。

a、HTTP/1.0

Pragma: 是否使用缓存。可选值为no-cache，告诉浏览器在使用缓存前要发请求到服务器进行验证，不可直接使用缓存。

Expires：缓存过期时间，用来指定资源到期的时间。

b、HTTP/1.1

Cache-Control：cache-control: max-age=2592000第一次拿到资源后的2592000秒内（30天），再次发送请求，读取缓存中的信息。

Cache-Control 还拥有多个值：

no-cache 不直接使用缓存，也就是跳过强缓存。

no-store 禁止浏览器缓存数据，每次请求资源都会向服务器要完整的资源。

public 可以被所有用户缓存，包括终端用户和 CDN 等中间件代理服务器。

private 只允许终端用户的浏览器缓存，不允许其他中间代理服务器缓存。

no-cache和no-store的区别：no-cache是跳过强缓存，还是会走协商缓存的步骤，而no-store是真正的完全不走缓存，所有资源都不会缓存在本地

两者同时存在的话，Cache-Control优先级高于Expires。

如何来确定本地缓存资源为最新的的呢？

a、服务器更新资源后，让资源名称不一样，这样页面导入的全新的资源。例如webpack打包文件名字用hash值。

b、在HTML导入时，文件后面加一个时间戳

c、协商缓存。

协商缓存 Last-Modified / ETag

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

协商缓存需要配合强缓存使用，使用协商缓存需要先设置Cache-Control：no-cache或者pragma：no-cache来告诉浏览器不走强缓存

a、Last-Modified/If-Modified-Since: 资源过期后（强缓存失效），用于与服务器验证资源时使用，值为资源的最后修改时间。

Last-Modified: 响应头部中的标识，值为一个具体的GMT（格林威治）时间，表示的是资源最后的修改时间，由服务器返回给客户端，供资源过期时（强缓存失效），客户端向服务器发送验证请求时使用。

If-Modified-Since: 请求头部中的标识，当资源过期后，需要向服务器发送验证请求，如果过期的缓存副本中包含了Last-Modified，那验证请求的头部会带上If-Modified-Since标识，值为缓存副本中Last-Modified的值，服务器获取该值后与资源当前最后修改时间做比较，如果最后修改时间小于或等于请求值，则返回304并更新相关缓存值，如果最后修改时间较新，说明资源被修改过，则返回200和新资源，对应更新缓存

b、Etag/If-None-Match: 资源过期后，用于与服务器验证资源时使用，值是资源的唯一标识（hash值）。

Etag: 响应头部中的标识，用于表示资源内容唯一性的标识，该值由服务器生成，生成规则由服务器自行决定，一般是文件大小（size）、修改时间（time）、索引（index）等数据Hash后生成。服务器在响应客户请求时可以带上Etag值，供资源过期时，客户端向服务器发送验证请求时使用。

If-None-Match: 请求头部中的标识，当资源过期后，需要向服务器发送验证请求，如果过期的缓存副本中包含了Etag，那验证请求的头部会带上`If-None-Match标识，值为缓存副本中Etag的值，服务器获取该值后与资源当前hash值做比较，如果相同，则返回304并更新相关缓存值，如果不相同，说明资源被修改过，则返回200和新资源，对应更新缓存。

第一次向服务器发送请求，协商缓存没有，向服务器发送请求（没有传递任何的标识）。服务器收到请求，准备内容。数据中会包含标识：Last-Modified （HTTP/1.0）资源的最后更新时间/ETag（HTTP/1.1）记录的是一个标识，也是根据资源文件更新生成的，每一次资源更新都会重新生成一个ETag。客户端拿到数据然后渲染，把信息和标识缓存到本地。

第二次想服务器发请求时，会带着标识。if-Modified-Since：Last-Modified （HTTP/1.0，只精确到秒，如果1秒内资源请求，和新资源更新，则无法识别） /If-None-Match：ETag（HTTP/1.1）。服务器来判断资源信息是否更新，没有更新返回304，从本地缓存获取，若丢失查询请求服务器；更新了返回200及最新资源。

2）Web Storage

在没有Web Storage之前，客户端浏览器存储数据都是通过cookie来实现的。

cookie优点：可配置过期时间、可跨域共享（具有相同祖先域名时）、与服务器数据交互等。

cookie缺点：客户端发送请求时，cookie会作为头部将无用数据一起发送给服务器；请求被拦截后，cookie数据有泄漏和被篡改的安全风险；cookie存储数据的大小被限制在4K；

因此cookie不适合做大数据量的存储，相比之下，Web Storage更适合存储大量数据。

每个域名下可提供5M的存储容量（不同浏览器可能有差异，比如IE是10M）；以key/value键值对的方式存储字符串，方便数据存取操作；只存储在客户端本地，不会随请求发送给服务端。

Web Storage分为两种，即sessionStorage和localStorage。

sessionStorage和localStorage之间的区别：

sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。

localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

3）App Cache（很少用）

Application Cache，随着移动端H5的流行，HTML5 提供一种应用程序缓存（Cache Manifest）机制，使得基于web的应用程序可以离线运行。开发人员需要为浏览器指定需要缓存的文件，在客户端离线的情况下，即使刷新页面，相关资源也可以正常加载和使用。

优点：

a、离线浏览: 用户可以在离线状态下浏览网站内容。

b、更快的速度: 因为数据被存储在本地，所以速度会更快。

c、减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

4）IndexedDB

随着浏览器功能的不断增强和完善，现有的缓存技术，其局限性也变得越来越明显。

a、容量太小: cookie和Web Storage最多也就支持5M，已经不能满足需求了

b、检索不方便: cookie和Web Storage都是以字符串形式存储数据，复杂对象数据存取前需要做处理，比较麻烦。

c、不能提供搜索功能，不能建立自定义的索引。

IndexedDB（Indexed DataBase）就是浏览器提供的本地数据库。IndexedDB可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。

IndexedDB 的特点:

a、键值对储存: IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

b、异步: IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

c、支持事务: IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

d、同源限制: IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

e、储存空间大: IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

f、支持二进制储存: IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

事务的几个特性：

原子性（Atomicity）：事务作为一个整体被执行，包含在其中的对数据库的操作要么全部被执行，要么都不执行。

一致性（Consistency）：事务应确保数据库的状态从一个一致状态转变为另一个一致状态。一致状态的含义是数据库中的数据应满足完整性约束。

隔离性（Isolation）：多个事务并发执行时，一个事务的执行不应影响其他事务的执行。

持久性（Durability）：已被提交的事务对数据库的修改应该永久保存在数据库中。