浏览器缓存图解

浏览器缓存有多种形式，持久化或者会话存储。以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