前端页面更新，解决浏览器缓存不更新问题

问题

在写静态网站的时候，经常回面临某些页面上传更新后，查看时会出现没有更新的清空，就是因为浏览器读取了缓存造成的，需要清空缓存刷新才可以看到页面的更新，但是有些用户不知道这些操作。就很头痛
浏览器缓存（强制缓存与协商缓存）
强制缓存

当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

具体的浏览器的缓存原理，这里就不说了，我也不是太明白，可以看下这篇文章
https://juejin.cn/post/6844903593275817998
解决办法
1.为页面加入meta标签

在head中添加meta标签以下内容，禁止缓存加载，直接请求服务器

Cache-Control`作用于`HTTP1.1`
`Pragma`作用于`HTTP1.0`
`Expires`作用于`proxies

这样浏览器在资源没修改的时候也不能加载缓存，十分影响体验，毕竟不能一棍子打死，在解决静态资源的时候，还可以为其添加版本号来控制。
2. js、css加上版本号

在引用链接的后面加入相应的版本号，每次修改

问号后面的不起实际作用，仅当作后缀，让浏览器自动检测更新最新的css，js等静态文件。如果用问号加参数的方法，可以添加版本号等信息，同时可以刷新一下浏览器端的缓存。这样在使用静态文件的时候会方便很多，当然也可以修改资源的名称这里就不再说了。

href=“style.css?v=1.0.0”
src=“main,js?v=1.0.0”

但是这样很麻烦，上传一次就要修改一次，在考虑可不可以自动生成，但是我用的是原生的js,没有用框架，有哪位大神可以提点一二啊

相关知识
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

https://blog.csdn.net/m0_37750806/article/details/119269635

前端页面更新，解决浏览器缓存不更新问题相关推荐

给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 备忘一下.
火狐浏览器怎么关闭自动更新火狐浏览器关闭自动更新的方法
火狐浏览器怎么关闭自动更新?很多用户觉得更新完新版本,用起来很不习惯.要怎么才能不自动更新呢,下面就给大家分享具体步骤. 首先我们要做的当然是打开你的火狐浏览器了,如果菜单栏在的话,点击工具选项. 火 ...
ie浏览器缓存不能更新页面数据
其他浏览器好使,ie浏览器不清缓存不能更新页面数据,采用下面的方法清除缓存需要在Java过滤器里面添加如下字段 response.setDateHeader("Expires", ...
完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）
一.简介开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了. 浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档 ...
前端构建工具-gulp ！（解决浏览器缓存问题）
一,为啥要用构建工具项目中的js和css属于静态文件,客户端第一次访问的时候会缓存这些文件,那就意味着当我们需要改js跟css的时候,即使我们将文件中的代码改了重新发布,那么客户端也是看不到,客户端 ...
android webview 更新,Android WebView缓存没更新解决方案
一:现象客户端加载过H5页面A,后来H5修改为A'发布之后,在很长一段时间内,客户端一直展示的是A,没有更新为A'. 重启之后依然没有更新,只有清除缓存或者重装APP才会更新. 二:分析根据现象得 ...
vue项目如何解决浏览器缓存问题
目录 1.什么是浏览器缓存 2.浏览器缓存类型 3.浏览器缓存的优势与劣势 4. 浏览器缓存机制 5.如何清除浏览器缓存在代码更新发布后,都会要求运营人员在访问网址时清除下本地缓存,防止万一掉坑那 ...
Angular 解决浏览器缓存快捷犀利之招
相信大家一定遇到过,我们开发的Web APP 编译部署上去之后,用户端并未看到更新的程序,需要刷新浏览器才能看到我们新增加的功能.这里,背后的原因就浏览器在背后偷偷地帮我们缓存了一些东西,比如常用的 ...

前端页面更新，解决浏览器缓存不更新问题

前端页面更新，解决浏览器缓存不更新问题相关推荐

最新文章

热门文章