作为前端人员，前端缓存的知识一定要掌握，因为网站打开网页的速度直接关系到用户体验和用户粘度，而提高网页打开速度的方法有很多，需要优化的方面有很多，其中比较重要的一点就是利用好缓存，缓存文件可以重复使用，还可以减少带宽和网络负载.1Cache缓存宏观上分为私有缓存和共享缓存。共享缓存是各级代理都可以缓存的缓存。私有缓存是用户独享的，不能被各级代理缓存。缓存从微观层面可以分为以下几类：浏览器缓存、代理服务器缓存、CDN缓存、数据库缓存、应用层缓存。读取资源请求返回状态码200。在chrome控制台的网络选项中，可以看到大小显示的是来自磁盘缓存还是来自内存缓存。frommemorycache是??指使用内存中的cache，fromdiskcache是??指使用硬盘中的cache。浏览器读取缓存的顺序是内存->磁盘。在浏览器中，浏览器解析执行后会直接将js、图片等文件存放到内存缓存中，所以页面刷新时，只需要直接从内存缓存（frommemorycache）中读取即可；而css文件会被存入硬盘文件，所以每次渲染页面时，都需要从硬盘（fromdiskcache）中读取缓存。Expires和Cache-Control的比较：其实两者没有太大区别。不同的是Expires是http1.0的产物，Cache-Control是http1.1的产物。如果两者同时存在，则Cache-Control优先级更高AfterExpires2.2NegotiationCacheNegotiationCache是??强制缓存失效，浏览器向服务器发送带有缓存标识的请求，由服务器决定是否根据缓存标识符使用缓存。If-Modified-Since浏览器第一次访问资源时，服务器返回资源时，会在响应头中添加Last-Modified头。该值为资源在服务器上的最后修改时间，浏览器收到后缓存该文件。和标题；下次浏览器请求该资源时，浏览器检测到有Last-Modified头，于是添加If-Modified-Since头，值为Last-Modified中的值；服务端再次收到这个资源请求，会根据If-Modified-Since中的值与该资源在服务端的最后一次修改时间比较，如果没有变化，则返回304和一个空的响应体，直接从缓存，如果服务器中If-Modified-Since的时间小于这个资源的最后修改时间，说明文件已经更新，所以返回一个新的资源文件和200。缺点：1.部分服务器获取不到准确的修改时间2.文件修改时间变了，但文件内容没变2.2.2ETag和If-None-MatchEtag是资源被请求时服务器返回的响应头上次加载，并且是资源的唯一标识符。只要资源发生变化，就会重新生成ETag。浏览器下次加载资源向服务器发送请求时，会将上次返回的Etag值放入请求头中的If-None-Match中，服务器只需要比对发送的If-None-Match即可通过客户端与自己服务器端资源在网上的ETag是否一致，可以判断该资源相对于客户端是否被修改过。如果服务端发现ETag不匹配，则直接将新资源（包括新的ETag）以常规GET200返回包的形式发送给客户端；如果ETag一致，则直接返回304，告知客户端直接使用本地缓存即可。2.2.3两种协商方式和缓存方式的比较首先，在精度上，Etag优于Last-Modified，Last-Modified的时间单位是秒。如果一个文件在1秒内变化了多次，那么他们的Last-Modified实际上并不能反映修改，但是Etag每次都会变化以保证准确性；如果是负载均衡的服务器，各个服务器生成的Last-Modified也可能不一致。在性能方面，Etag不如Last-Modified。毕竟Last-Modified只需要记录时间，而Etag则需要服务器通过算法计算出一个hash值。在优先级上，服务器验证优先Etag3缓存机制appcache优先于强缓存，强制缓存优先于协商缓存。如果强制缓存（Expires和Cache-Control）生效，则直接使用缓存，如果不生效，则进行协商缓存（Last-Modified/If-Modified-Since和Etag/If-None-Match），协商缓存由服务器决定是否使用缓存。如果协商缓存失败，说明该请求的缓存无效，返回200，并返回资源和缓存标识，存入浏览器缓存；如果生效，则返回304，继续使用缓存。具体过程如下图所示：无论是浏览器缓存还是代理服务器缓存，CDN缓存都遵循客户端和服务器之间的缓存机制4、本地存储本地存储主要包括以下几种，localStorage、sessionStorage和cookie，WebSql和IndexDB主要用在前端对存储要求比较大的页面，比如在线编辑浏览器或者网络邮箱。它们都可以在浏览器中存储数据，应该根据不同的场景使用。4.1CookieCookie主要由服务端生成，前端也可以设置，客户端本地保存的一个文件，通过响应头的set-Cookie字段设置，cookie的内容自动传递给请求时的服务器。如下：[HTTP/1.1200OK]Server:[bfe/1.0.8.18]Etag:["58860415-98b"]Cache-Control:[private,no-cache,no-store,proxy-revalidate,no-transform]连接：[Keep-Alive]Set-Cookie：[BDORZ=27315;最大年龄=86400；域名=.baidu.com；path=/]Pragma:[no-cache]Last-Modified:[Mon,23Jan201713:24:37GMT]Content-Length:[2443]Date:[Mon,09Apr201809:59:06GMT]Content-Type:[text/html]Cookie包含的信息：它可以记录您的用户名、密码、访问过的网页、花费的时间等信息。当您再次来到该网站时，网站会读取Cookies并获取您的相关信息，从而做出相应的动作，例如在页面上显示欢迎标语，或者让您无需输入ID或密码直接登录。etc.一个网站只能读取自己放置的信息，不能读取其他网站的cookie文件。所以cookie文件中还保存了host属性，即网站的域名或ip。这些属性以名称-值对的形式存储，并且为了安全起见，它们的大部分内容都经过加密。cookie文件的命名格式为：用户名@网站地址[编号].txtCookie的优点：给用户更人性化的体验，如记忆“密码功能”、老用户登录欢迎词弥补HTTP不连接功能站点统计访问者数量的依据。cookies的缺点：无法解决多人共用一台电脑，带来不安全因素的问题。Cookie文件很容易被误删除。一个人用多台电脑作弊。修改host文件，限制可非法访问目标站点的cookie容量，不能超过4kb，请求头中数据安全性差4.2localStoragelocalStorage主要面向前端开发者。向服务器请求数据，从而减少不必要的数据请求，减少不必要的数据在浏览器和服务器之间来回传递。数据可长期保存，不受时间限制，数据可使用一天、一年、两年甚至更长时间。在localStorage中，一般浏览器支持5M大小，不同浏览器会有所不同。优点：localStorage扩展了cookies的4k限制。LocalStorage可以直接将第一次请求的5M大小的数据存储到本地。因为cookies可以节省带宽，localStorage的使用也遵循同源策略，所以不同的网站不能直接共享同一个localStorage。缺点：需要手动删除，否则时间长了会出现不同浏览器大小和版本。LocalStorage只支持String类型存储，需要转换JSON对象localStorage本质上是字符串读取，如果存储内容大，会消耗内存空间，导致页面卡顿。Storage），只能在浏览器关闭前使用。当您创建另一个页面时，您同意使用它。关闭浏览器后，数据将消失。存储限制：不同的浏览器有不同的存储限制，但大多数浏览器的上限都在5MB以下4.4websqlWebSQL在浏览器上模拟一个数据库，可以用JS操作SQL完成数据的读写。它使用SQL来操作异步的客户端数据库API，规范中使用的方言是SQLlite。数据库还在服务器端，不推荐使用，已经废弃。4.5indexDB随着浏览器功能的不断增强，越来越多的网站开始考虑在客户端存储大量数据，这样可以减少从服务器端获取数据的次数，直接从本地获取数据。现有的浏览器数据存储方案不适合存储大量数据：cookie的大小不超过4KB，每次请求都会发回服务器；提供了搜索功能，但无法创建自定义索引。因此需要一个新的解决方案，这就是IndexedDB诞生的背景。通俗地说，IndexedDB是浏览器提供的本地数据库，可以通过web脚本来创建和操作。IndexedDB允许存储大量数据，提供查找接口和构建索引。这些在LocalStorage中不可用。就数据库类型而言，IndexedDB不是关系型数据库（不支持SQL查询语句），更接近于NoSQL数据库。关于indexDB的知识可以查看这篇文章http://www.ruanyifeng.com/blo...在这里，我只是根据自己的理解整理了一下关于缓存和存储的知识。不足之处还有很多，还有更多更实用的知识，请查看其他文章，如有错误，请指出参考文章：https://www.jianshu.com/p/54c...https://segmentfault.com/a/11...http://www.cnblogs.com/etoah/...https://blog.csdn.net/zhouche...
