浏览器缓存图解

浏览器缓存有多种形式，持久化或者会话存储。以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指纹。在这种场景下，就只能使用协商缓存了。