浏览器缓存机制介绍
简单来说,浏览器缓存就是把一个已经请求过的 web 资源拷贝一份存储在浏览器中,当下次请求相同的资源时,浏览器会根据缓存机制决定直接使用副本响应访问请求还是再次向服务器发送请求。
如下图所示是我在第二次打开某个网页时的资源请求图,可以看出里面大部分资源是从浏览器直接读取了缓存。
那么浏览器缓存究竟有什么作用呢?在这里我将浏览器缓存的作用简单地归结为以下几点。
加快页面打开速度
降低服务器压力
减少网络损耗
所以浏览器缓存虽然有时对我们开发者来说并不那么「友好」,但其对提升用户体验却有很大的帮助,接下来就让我们来学习浏览器缓存机制吧。
浏览器缓存有 HTML Meta 标签控制与 HTTP 头信息控制两种。
Web 缓存大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 缓存)、浏览器缓存。
浏览器缓存也包含很多内容: HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。
明确几个术语:
- 缓存命中率:从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。
- 过期内容:超过设置的有效时间,被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求,必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。
- 验证:验证缓存中的过期内容是否仍然有效,验证通过的话刷新过期时间。
- 失效:失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。
浏览器缓存主要是 HTTP 协议定义的缓存机制。HTML meta 标签,例如
<META HTTP-EQUIV="Pragma" CONTENT="no-store">
含义是让浏览器不缓存当前页面。但是代理服务器不解析 HTML 内容,一般应用广泛的是用 HTTP 头信息控制缓存。