浏览器的缓存能够极大程度的提高页面的性能,提高用户的使用体验。
当浏览器中第一次输入一个URL访问服务器,服务器发送资源,并带上一个ETag(当前资源的唯一标识符),以及Last-Modified(用来标记当前资源的最后修改时间) 浏览器请求到的资源进行缓存,当浏览器第二次请求的时候,根据浏览器的缓存机制来判断,缓存是否过期,如未过期,直接使用缓存的资源,如过期则向服务器重新请求资源。
1.1 浏览器缓存的控制
1.1.1 可以通过设置meta标签,设置当前页面不被缓存,每次访问都需要去服务器拉取
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
1.1.2 与缓存有关系的HTTP消息报头
Cache-Control 响应信息
Cache-Control有很多值,max-age 为缓存最大的有效时间 no-cache 获取缓存前要向服务器请求,资源是否是最新的 no-store
禁止缓存
Expries 用来指定资源的到期时间 ,优先级低于Cache-Control
Last-modified & If-modified-since
浏览器再次请求的时候,会在请求信息中带上If-modified-since 询问 Last-modified 时间点之前,资源是否被修改过,如果没有被修改则返回304,使用缓存,如果修改过,则再次向服务器请求资源,返回码为200
Etag 和 If-None-Match
服务器生成一段hash 字符串,来标记资源,浏览器携带请求头If-None-Match 检查Etag是否有更改 ,比Last-modified 更加准确,服务器会优先对比Etag
1.1.2 以下单位请求浏览器不会缓存
- HTTP信息头中 Cache-Control : no-cache 或者Cache-Control :max-age = 0
- 需要根据cookie,认证信息等决定输入内容的动态请求
- post请求不能被缓存
- 经过https加密的缓存
http响应头中不包含Last-modified & If-modified-since Etag 和 If-None-Match 不能被缓存
用户行为对缓存的影响, F5 强缓存失效,ctrl+F5 缓存都失效,需要重新请求