前言浏览器缓存是一种在浏览器端保存数据以供快速读取或避免重复资源请求的优化机制。有效的缓存使用可以避免重复的网络请求和浏览器快速读取本地数据，从而加快网页整体呈现给用户的速度。浏览器端缓存机制有很多种，大体归纳为九种。下面详细分析一下这九种缓存机制的原理和使用场景。开启浏览器的调试模式——Application右侧有8种浏览器的缓存机制。1、http缓存http缓存是一种基于HTTP协议的浏览器文件级缓存机制。即在重复请求文件的情况下，浏览器可以根据协议头判断是向服务器请求文件还是从本地读取文件。chrome控制台下的Network显示浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要针对重复的http请求，有缓存时判断过程主要分为3步：判断是否过期，如果没有过期，直接读取http缓存文件，不发送http请求，否则进入下一步。判断是否包含etag，如果有则发送带有if-none-match的请求，未修改则返回304，修改则返回200，否则进行下一步。判断是否包含last-modified，如果是，则发送带有if-modified-since的请求，无效则返回200，有效则返回304，否则直接向服务器请求。如果通过etag和last-modified判断，即使返回304，也至少有一个http请求，但是返回的是304的返回内容，而不是文件内容。因此合理的设计和实现expires参数可以减少更多的浏览器请求。2、WebSQLwebsql只被较新的chrome浏览器支持，以独立规范的形式出现。它主要有以下特点：WebSql数据库API实际上并不是HTML5规范的一部分；它存在于HTML5之前，是一个单独的规范；将数据以数据库的形式存储在客户端，并根据需要读取；与Storage不同的是，Storage和Cookie都是以键值对的形式存在；WebSql更方便检索，允许sql语句查询；让浏览器实现小型数据库存储功能；该数据库集成在浏览器中，目前主流浏览器基本都支持；websqlAPI主要包括三个核心方法：openDatabase：该方法使用已有的数据库或者创建一个新的数据库来创建数据库对象。transaction：该方法允许我们根据情况控制事务提交或回滚。executeSql：此方法用于执行实际的SQL查询。openDatabase方法可以打开一个现有的数据库，如果它不存在则创建它：vardb=openDatabase('mydatabase','2.0',mydb',2*1024);openDatabasek中的五个参数分别是：数据库名称、版本号、描述、数据库大小、创建回调。也可以在没有创建回调的情况下创建数据库。database.transaction()函数用于查询，executeSql()用于执行sql语句。3.indexDBIndexedDB是一个API，用于在客户端存储大量结构化数据，并在这些数据上使用索引进行高性能检索。尽管DOM存储对于存储少量数据非常有用，但它无法存储大量结构化数据。IndexedDB提供了这样的解决方案。IndexedDB为同步和异步访问提供单独的API。同步API仅供WebWorkers在内部使用，但尚未被任何浏览器实现。异步API可以在WebWorker内部和外部使用。此外，浏览器可能对indexDB有50M的大小限制。通常，用户保存了大量的用户数据，需要在数据之间进行搜索。4.CookiesCookies（或Cookies）是指一般网站为了识别用户身份和进行会话跟踪而存储在用户本地终端上的数据（通常是加密的）。cookie一般在http请求的header中一起发送给服务器。一条cookie记录主要由key、value、domain、expirationtime、size组成。通常，用户保存用户认证信息。cookie的最大长度和域名数量由不同的浏览器决定，如下：浏览器支持的域名最大长度50forIE7及以上4095BFirefox50for4097BOpera30for4096BSafari/WebKitUnlimited4097B不同之间的Cookie信息域名是独立的。如果需要设置分享，可以在服务器端设置cookie的路径和域来实现分享。浏览器也可以通过document.cookie获取cookie，通过js浏览器可以方便的读取/设置cookie的值。5.localstorageLocalStorage是HTML5新的本地缓存方案。目前使用较多。一般用于存放ajax返回的数据，加快下一页打开时的渲染速度。浏览器最大长度IE9及以上5MFirefox8及以上5.24MOpera2MSafari/WebKit2.6M//localStorage核心API：localStorage.setItem(key,value)//设置记录localStorage.getItem(key)//获取记录localStorage。removeItem(key)//删除本域名下的单条记录localStorage.clear()//删除本域名下的所有记录值得注意的是，localstorage的大小是有限的，不适合存放过多的数据。如果数据存储超过最大限制，将报错，并删除最早保存的数据。六、sessionstoragesessionStorage与localstorage类似，但浏览器关闭时会全部删除。api和localstorage一样，在实际项目中很少用到。七、应用缓存应用缓存就是把大部分的图片资源、js、css等静态资源放在manifest文件配置中。页面打开时，读取本地文件或通过manifest文件请求服务器文件。离线访问对于基于Web的应用程序越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，而且并不总是按预期工作。HTML5使用ApplicationCache接口解决了部分离线带来的问题。前提是你需要访问的网页至少在线访问过一次。使用缓存接口可为您的应用带来三个好处：离线浏览–用户可以在离线时浏览您的完整网站。速度——缓存的资源是本地的，因此加载速度更快。更少的服务器负载——浏览器只会从发生变化的服务器上下载资源。8.cacheStorageCacheStorage在ServiceWorker规范中定义。CacheStorage可以保存每个serverWorker声明的缓存对象。CacheStorage有五个核心方法：open、match、has、delete、keys，可以对缓存对象的不同匹配做出不同的响应。 cacheStorage.has()如果包含缓存对象，则返回一个promise对象。 cacheStorage.open()打开一个缓存对象并返回一个promise对象。 cacheStorage.delete()删除缓存对象，成功则返回一个promise对象，否则返回false。 cacheStorage.keys()包含任意一个keys中的字符串，并返回一个promise对象。 cacheStorage.delete()匹配key中包含字符串的缓存对象，返回一个promise对象。9.这种flashcaching的方法基本不用了。这种方法主要是基于flash具有在浏览器端读写本地目录的功能。同时也可以为js提供调用的API，这样页面就可以通过js调用flash来读写特定的磁盘。目录以达到本地数据缓存的目的。
