Html静态页面更新,解决浏览器缓存不更新问题
问题
在写静态网站的时候,经常回面临某些页面上传更新后,查看时会出现没有更新的清空,就是因为浏览器读取了缓存造成的,需要清空缓存刷新才可以看到页面的更新,但是有些用户不知道这些操作。就很头痛
浏览器缓存(强制缓存与协商缓存)
强制缓存
当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Control优先级比Expires高。
协商缓存
协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程
具体的浏览器的缓存原理,这里就不说了,我也不是太明白,可以看下这篇文章
https://juejin.cn/post/6844903593275817998
解决办法
为页面加入meta
标签
在head
中添加meta
标签以下内容,禁止缓存加载,直接请求服务器
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />Cache-Control`作用于`HTTP1.1`
`Pragma`作用于`HTTP1.0`
`Expires`作用于`proxies
这样浏览器在资源没修改的时候也不能加载缓存,十分影响体验,毕竟不能一棍子打死,在解决静态资源的时候,还可以为其添加版本号来控制。
js、css加上版本号
在引用链接的后面加入相应的版本号,每次修改
<link rel="stylesheet" href="style.css?v=1.0.0">
<script src="main,js?v=1.0.0"></script>
问号后面的不起实际作用,仅当作后缀,让浏览器自动检测更新最新的css,js等静态文件。如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。这样在使用静态文件的时候会方便很多,当然也可以修改资源的名称这里就不再说了。
href=“style.css
?v=1.0.0
”
src=“main,js?v=1.0.0
”
相关知识
Expires
Expires是HTTP/1.0控制网页缓存的字段,其值为服务器返回该请求结果缓存的到期时间,即再次发起该请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。
Expires是HTTP/1.0的字段,但是现在浏览器默认使用的是HTTP/1.1,那么在HTTP/1.1中网页缓存还是否由Expires控制?
到了HTTP/1.1,Expire已经被Cache-Control替代,原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比,那么如果客户端与服务端的时间因为某些原因(例如时区不同;客户端和服务端有一方的时间不准确)发生误差,那么强制缓存则会直接失效,这样的话强制缓存的存在则毫无意义,那么Cache-Control又是如何控制的呢?
Cache-Control
在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为
- public:所有内容都将被缓存(客户端和代理服务器都可缓存)
- private:所有内容只有客户端可以缓存,Cache-Control的默认取值
- no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
- no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
- max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效
相关链接:https://zhuanlan.zhihu.com/p/83091549
https://juejin.cn/post/6844903593275817998
Html静态页面更新,解决浏览器缓存不更新问题相关推荐
- 前端页面更新,解决浏览器缓存不更新问题
问题 在写静态网站的时候,经常回面临某些页面上传更新后,查看时会出现没有更新的清空,就是因为浏览器读取了缓存造成的,需要清空缓存刷新才可以看到页面的更新,但是有些用户不知道这些操作.就很头痛 浏览器缓 ...
- 给url添加时间戳,解决浏览器缓存
//解决浏览器缓存function timestamp(url){// var getTimestamp=Math.random();var getTimestamp=new Date().getTi ...
- 给js加版本号解决浏览器缓存问题
给js加版本号解决浏览器缓存问题 参考文章: (1)给js加版本号解决浏览器缓存问题 (2)https://www.cnblogs.com/wblx/p/11050498.html 备忘一下.
- 火狐浏览器怎么关闭自动更新 火狐浏览器关闭自动更新的方法
火狐浏览器怎么关闭自动更新?很多用户觉得更新完新版本,用起来很不习惯.要怎么才能不自动更新呢,下面就给大家分享具体步骤. 首先我们要做的当然是打开你的火狐浏览器了,如果菜单栏在的话,点击工具选项. 火 ...
- 解决加载静态文件无法被浏览器缓存问题
开发环境是:nginx+spring boot + thymeleaf. 遇到的问题:js/css等静态资源文件不被浏览器缓存:如果是本地开发环境不会有这个问题. 解决方法是:nginx设置gzip和 ...
- ie浏览器缓存不能更新页面数据
其他浏览器好使,ie浏览器不清缓存不能更新页面数据,采用下面的方法清除缓存 需要在Java过滤器里面添加如下字段 response.setDateHeader("Expires", ...
- vue项目 如何解决浏览器缓存问题
目录 1.什么是浏览器缓存 2.浏览器缓存类型 3.浏览器缓存的优势与劣势 4. 浏览器缓存机制 5.如何清除浏览器缓存 在代码更新发布后,都会要求运营人员在访问网址时清除下本地缓存,防止万一掉坑 那 ...
- 前端构建工具-gulp !(解决浏览器缓存问题)
一,为啥要用构建工具 项目中的js和css属于静态文件,客户端第一次访问的时候会缓存这些文件,那就意味着当我们需要改js跟css的时候,即使我们将文件中的代码改了重新发布,那么客户端也是看不到,客户端 ...
- Angular 解决浏览器缓存 快捷犀利之招
相信大家一定遇到过,我们开发的Web APP 编译部署上去之后,用户端并未看到更新的程序,需要刷新浏览器才能看到我们新增加的功能.这里,背后的原因就浏览器在背后偷偷地帮我们缓存了一些东西,比如常用的 ...
- 解决浏览器缓存问题的三个解决方法
1.使用meta标签设置缓存机制,在head 设置 meta <meta http-equiv="Cache-Control" content="no-cache, ...
最新文章
- quartus II Warning 好的时序是设计出来的,不是约束出来的
- Oracle登录命令
- redis主从复制原理、断点续传、无磁盘化复制、过期key处理
- xhtml使用style属性
- eclipse 中 构建路径下的 order and export 是干什么用
- ASP.NET MVC与RAILS3的比较
- Maven 系统环境变量配置
- WinXp系统中没有ChangeWindowMessageFilter这个函数
- sublime text 2 解决错误 [Decode error - output not utf-8]
- 格式要求_课题论文的格式要求
- 讲座资源:ASP.NET AJAX 体验
- Jmeter学习之旅(四)——各类型的HTTP接口功能测试
- python差分进化算法_差分进化算法(differential evolution)的Python实现
- C++标准模板库(STL)(3) 之 vector map容器快速学习 (自学笔记)
- 网站弹窗广告html,网站弹窗广告(彻底关闭浏览器的广告弹窗?)
- 2021邵阳市地区高考成绩排名查询,2021邵阳最新高中排名前十
- Java中基本数据类型和包装类型的区别
- 一文读懂IBIS模型
- Android:NDK
- 自我成长自学必备网站,终生学习平台