浏览器缓存图解

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

更多高阶内容和前端话题可移步我的小专栏-娜姐聊前端。