浏览器的缓存机制主要是为了提高网页的加载速度,减少服务器的负载,并优化用户的浏览体验。浏览器缓存可以分为以下几种类型:
-
强缓存(HTTP Cache Control) 强缓存不会向服务器发送请求,直接从缓存中读取资源。这是通过设置HTTP响应头中的
Cache-Control
和Expires
实现的。Cache-Control
: 这个响应头可以设置多个值,比如:max-age=xxx
:表示资源在xxx秒后过期。no-store
:不允许缓存,每次都要向服务器请求。no-cache
:资源不会被缓存,每次都会发请求到服务器验证资源是否有更新。
Expires
: 这是一个绝对时间,表示资源的过期时间。
-
协商缓存(Validation Cache) 当强缓存失效后,浏览器会向服务器发送请求,询问资源是否有更新。这是通过
Last-Modified/If-Modified-Since
和ETag/If-None-Match
这两对HTTP头实现的。Last-Modified/If-Modified-Since
: 服务器响应时通过Last-Modified
标识资源最后修改时间,浏览器下次请求时带上If-Modified-Since
,服务器比较后如果没有变化则返回304状态码,浏览器继续使用缓存。ETag/If-None-Match
:ETag
是资源的一个唯一标识,类似于指纹。浏览器在请求时带上If-None-Match
,服务器对比ETag,如果没有变化则返回304状态码,浏览器继续使用缓存。
-
Web Storage(本地存储) 包括
localStorage
和sessionStorage
,它们提供了在客户端存储键值对数据的能力。localStorage
数据在浏览器关闭后依然存在,而sessionStorage
的数据在页面会话结束时被清除。 -
IndexedDB 是一种在浏览器中保存大量结构化数据的方式,可以创建、读取、遍历和搜索数据库中的记录。IndexedDB操作基于事件响应,与Web Storage相比,它可以提供更复杂的数据操作功能。
-
Service Workers Service workers可以拦截请求,并可以使用缓存API来管理请求的响应。开发者可以编写自己的缓存策略,例如,当网络不可用时,可以从缓存中提供备份内容。
举个例子,假设用户第一次访问一个网页,浏览器会下载所有资源,并按照HTTP头信息决定哪些资源应当被缓存。当用户再次访问这个网页时,如果相关资源具备有效的强缓存设置,浏览器会直接从缓存中加载资源,不经过服务器请求,这样可以极大提高页面加载速度。如果强缓存过期,浏览器会使用协商缓存机制与服务器通信,确认资源是否更新,从而决定是重新下载资源,还是继续使用缓存版本。