网站打开网页的速度直接关系到用户体验，用户粘度，而提高网页的打开速度有很多方面需要优化，其中比较重要的一点就是利用好缓存，缓存文件可以重复利用，还可以减少冗余的数据传输 ，降低网络负荷，减轻服务器负担，加快客户端加载网页的速度 。
缓存概述
- 缓存从宏观上分为私有缓存和共享缓存，共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的，各级代理不能缓存的缓存。
- 缓存从微观上可以分为以下几类：
- 浏览器缓存
- 代理服务器缓存
- CDN缓存
- 数据库缓存
-
应用层缓存
这里主要对浏览器的缓存进行说明：
image
1.http缓存
1.1强缓存
- 不会向服务器发送请求，直接从缓存中读取资源
- 请求返回200的状态码
- 在chrome控制台的network选项中可以看到size显示from disk cache或from memory cache。
from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。
1.1.1实现强缓存的两种方式
强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间。
①Expires
Expires是http1.0的规范，它的值是一个绝对时间的GMT格式的时间字符串。如网页的Expires值是：expires:Fri, 14 Oct 2018 10:47:02 GMT。这个时间代表这这个资源的失效时间，只要发送请求时间是在Expires之前，那么本地缓存始终有效，则在缓存中读取数据。
②Cache-Control
Cache-Control是在http1.1中出现的，主要是利用该字段的max-age值来进行判断，它是一个相对时间，例如Cache-Control:max-age=3600，代表着资源的有效期是3600秒。cache-control除了该字段外，还有下面几个比较常用的设置值：
- no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
- no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
- public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
- private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
Cache-Control与Expires可以在服务端配置同时启用，同时启用的时候Cache-Control优先级高。
1.2协商缓存
协商缓存就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问。
主要涉及到两组header字段：Etag和If-None-Match、Last-Modified和If-Modified-Since。
1.2.1 Last-Modified和If-Modified-Since
浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modified，Last-Modified是一个时间标识该资源的最后修改时间，例如Last-Modified: Thu,31 Dec 2037 23:59:59 GMT。
当浏览器再次请求该资源时，request的请求头中会包含If-Modified-Since，该值为缓存之前返回的Last-Modified。服务器收到If-Modified-Since后，根据资源的最后修改时间判断是否命中缓存。
- 若If-Modified-Since==服务器资源最后更新时间：
服务器返回304，不返回资源，不返回 Last-Modified；资源直接从缓存读取。 - 若If-Modified-Since<服务器资源最后更新时间：
服务器返回200，返回资源，返回 Last-Modified；资源从服务器加载；
1.2.2 ETag和If-None-Match
Etag是上一次加载资源时，服务器返回的response header，是对该资源的一种唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上，那么直接以常规GET 200回包形式将新的资源（当然也包括了新的ETag）发给客户端；如果ETag是一致的，则直接返回304知会客户端直接使用本地缓存即可。
- 若If-None-Match==服务器上该资源的ETag：
服务器返回304，不返回资源，不返回 ETag；资源直接从缓存读取。 - 若If-None-Match！=服务器上该资源的ETag：
服务器返回200，返回资源，返回 ETag；资源从服务器加载；
1.2.3为什么要有Etag
你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：
- 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
- 在精确度上，Etag要优于Last-Modified，Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度 ;
- 某些服务器不能精确的得到文件的最后修改时间。
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
1.3HTTP状态码及区别
状态 类型 说明
200 form memory cache 不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中
200 form disk ceche 不请求网络资源，在磁盘当中，一般非脚本会存在内存当中，如css等
200 资源大小数值 从服务器下载最新资源
304 报文大小 请求服务端发现资源没更新，使用本地资源
2.缓存机制
在浏览器第一次发起请求时，本地无缓存，向web服务器发送请求，服务器起端响应请求，浏览器端缓存。过程如下：
在第一次请求时，服务器会将页面最后修改时间通过Last-Modified标识由服务器发送给客户端，客户端记录修改时间；服务器还会生成一个Etag，并发送给客户端。
浏览器后续再次进行请求时：
3.本地存储
3.1 Cookie
Cookie主要是由服务器生成，且前端也可以设置，保存在客户端本地的一个文件，cookie默认的生命周期在浏览器关闭后就结束了。其可以访问到的域名在创建的域名及其子域下，可以访问到的路径在创建的路径下及其子路径下，通过response响应头的set-Cookie字段进行设置，且Cookie的内容自动在请求的时候被传递给服务器。如下：
[HTTP/1.1 200 OK]
Server:[bfe/1.0.8.18]
Etag:["58860415-98b"]
Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform]
Connection:[Keep-Alive]
Set-Cookie:[BDORZ=27315; max-age=86400; domain=.baidu.com; path=/]
Pragma:[no-cache]
Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT]
Content-Length:[2443]
Date:[Mon, 09 Apr 2018 09:59:06 GMT]
Content-Type:[text/html]
Set-Cookie: cookie1=val1; Expires=?; Domain=?; Path=?
- Domain告诉浏览器当前要添加的Cookie的域名归属，如果没有明确指明则默认为当前域名 。
- Path告诉浏览器当前要添加的Cookie的路径归属，如果没有明确指明则默认为当前路径 。
Cookie的优点：
- 给用户更人性化的使用体验，如记住“密码功能”、老用户登录欢迎语
- 弥补了HTTP无连接特性
- 站点统计访问人数的一个依据
Cookie的缺点：
- 它无法解决多人共用一台电脑的问题，带来了不安全因素
- Cookie文件容易被误删除
- Cookies欺骗。修改host文件，可以非法访问目标站点的Cookie
- 容量有限制，不能超过4kb
- 在请求头上带着数据安全性差
3.2 localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
优点：
- localStorage拓展了cookie的4k限制
- localStorage可以将第一次请求的5M大小数据直接存储到本地，相比于cookie可以节约带宽
- localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
缺点：
- 需要手动删除，否则长期存在
- 浏览器大小不一，版本的支持也不一样
- localStorage只支持string类型的存储，JSON对象需要转换
- localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage的使用
几个常用方法：
①清空localStorage ：localStorage.clear() ;
②存储数据：localStroage.setItem("key","value");
③读取数据：localStroage.getItem("key");
④删除某个变量 ：localStroage.removeItem("key");
⑤检查localStorage里是否保存某个变量 ：localStroage.hasOwnProperty("key");
⑥将JSON存储到localStorage里 ：
1）定义一个json；
2）使用JSON.stringify(json)将json转换为string；
3）使用localStroage.setItem("key","value")存储。
3.3 sessionStorage
sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，sessionStorage生命周期为当前窗口或标签页，在关闭窗口或标签页之后将会删除这些数据。
sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。
3.4 websql
Web SQL 是在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写。它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite。 不建议使用，已废弃 。
3.5indexDB
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 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 对象）。
