Web前端学习入门之浏览器缓存机制分析

浏览器缓存就是把一个已经请求过的资源拷贝一份存储起来，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。很多重庆Web前端学习入门小白好奇浏览器究竟是如何工作的？它的缓存机制是什么，接下来小编就给大家介绍一下。

浏览器缓存机制有四个方面，按照获取资源时请求的优先级依次排列为：Memory Cache、Service Worker Cache、HTTP Cache、Push Cache。

MemoryCache，是指存在内存中的缓存。从优先级上来说，它是浏览器最先尝试去命中的一种缓存。从效率上来说，它是响应速度最快的一种缓存。浏览器秉承的是“节约原则”Base64格式的图片永远可以被塞进memory cache，这可以视作浏览器为节省渲染开销的“自保行为”。体积不大的JS、CSS文件，也有较大地被写入内存的几率，但较大的JS、CSS文件就没有这个待遇了。

Service Worker是一种独立于主线程之外的Javascript 线程。它脱离于浏览器窗体，因此无法直接访问DOM。这样独立的个性使得 Service Worker 的“个人行为”无法干扰页面的性能，能够帮我们实现离线缓存、消息推送和网络代理等功能。

HTTP Cache，可分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。对一条http get报文的基本缓存处理过程包括7个步骤：接收、解析、查询、新鲜度检测、创建响应、发送、日志。

Push Cache是指HTTP2在server push阶段存在的缓存，是缓存的最后一道防线。浏览器只有在Memory Cache、HTTP Cache和Service Worker Cache均未命中的情况下才会去询问Push Cache。Push Cache是一种存在于会话阶段的缓存，当session 终止时，缓存也随之释放。不同的页面只要共享了同一个HTTP2连接，那么它们就可以共享同一个Push Cache。

目前我们常说的浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制。HTTP协议定义的缓存策略包括Expires策略、Cache-control策略、用户行为与缓存三部分。