前端页面meta标签设置缓存
2019-08-02 本文已影响0人
hao102
配合客户端写的网页；客户端需求是无网络的情况下要使用缓存的网页；但是发现服务端更新完文件后并且ETag值发生了更改但是前端页面并没有更新；废话不说；先走代码；该代码是让客户端在有网络的情况下每次校验服务端是否发生更改；
<meta http-equiv="Cache-control" content="no-cache,max-age=0, must-revalidate,no-store">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache">
浏览器的缓存机制
- 当前缓存的文件是否过期；
- 服务器中文件是否有改动
判断缓存过期以及文件的变动
文件变动后文件的Etag值会发生更改；客户端先问服务器Etag值是否发生更改；然后决定是否更新当前文件；
设置过期,在请求头中设置字段
Http1.0
-
Pragma:它用来向后兼容只支持 HTTP/1.0 协议的缓存服务器，那时候 HTTP/1.1 协议中的 Cache-Control 还没有出来
Http1.1
- Expires:相应头过期时间；Cache-control中设置max-age;则该属性会被忽略
- Cache-control;该字段的优先级要比Expires优先级高
Cacha-control常见的取值：
-
no-chche:表示无论服务端有没有设置Cache-control,都必须重新追根到源服务器进行校验，源服务器未变化返回304； -
must-revalidate:告诉浏览器/缓存服务器；在本地文件过期之前可以使用本地文件；本地文件一旦过期需要去源服务器进行有效性校验；如果有缓存服务器且该资源未过有效期则命中缓存服务器并返回200；如果过期切源服务器未发生更改；则教研后返回304； -
max-age:缓存的内容将在多少秒后失效,相对于请求时间来说的；max-age=0便是无论服务端如何设置；在重新获取资源之前；先检验ETag/Last-Modified;在设置max-age=0或no-cache后；在资源无更新的情况下访问都会返回304 -
private:客户端可以缓存 -
public:客户端和代理服务器都可缓存
