浏览器缓存图解
浏览器缓存有多种形式，持久化或者会话存储。以chrome为例，打开调试面板，找到Application选项卡，就可以看到它所支持的各种缓存模式，如下图：
chrome application.png
上图没有http缓存（因为它体现在请求头，在Network选项卡查看更为合适），其实，这恰巧是利用缓存做前端性能优化的重要方法，所以，把它也纳入浏览器缓存表格，并且在文章末尾附加详细的流程图。
缓存方式 | 详解 | 使用情况 |
|---|---|---|
http缓存 | 分为强缓存（200）和协商缓存（304），详细流程参考下图 | 强烈推荐 |
localstorge | 本地缓存单个域名下有大小限制（最大5M）同一域名多个页面共享 | 推荐 |
sessionstorage | 本地缓存页面关闭时清空 | 不推荐 |
cookie | 不支持跨域（同localstorge）可通过设置domain和path实现共享域名分为session cookie（关闭浏览器清空）和持久性cookie（定义有效期）httponly设置为true时，JS无法获取cookie值常用于身份验证（逐渐被token替代） | 可以用用 |
webSQL | 非HTML5规范，是一种特定的浏览器特性集成在浏览器中的本地数据库类似NoSQL数据库 | 不推荐 |
indexDB | HTML5规范50M限制浏览器支持情况不佳 | 还需等等 |
Application Cache | 通过manifest配置文件在本地有选择性的存储JS/CSS/图片等静态资源存储大小：5M静态资源必须和HTML文件同源逐渐被Service Worker替代 | 不推荐 |
Cache Storage | ServiceWorker 规范中定义的离线方案设置window全局内置对象caches浏览器兼容性较差 | 还需等等 |
小贴士：
serviceWorker：和webWorker一样是在浏览器后台作为独立线程运行的JavaScript脚本。通过message/postMessage方法在页面直接通信。下图为http缓存流程图：
浏览器缓存.png
协商缓存并非是一种被强缓存“低级”的策略，对于一些特殊的应用场景或资源，协商缓存优于强缓存。
比如，单页面项目中，每次发布JS和CSS文件都可能发生变化（通过在文件名上加hash来指定变化），那么，必须保证每次请求到的HTML文件必须是最新的。为了便于服务器解析和网站地址的唯一性，我们又不能在HTML文件上应用hash指纹。在这种场景下，就只能使用协商缓存了。