js清除缓存

更新日期: 2021-11-24阅读量: 42标签: 缓存

浏览器缓存

浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的。今天主要介绍缓存问题的情况,以及清除缓存的几种方法。


缓存问题

首先介绍下出现缓存问题的情况:

情况一:form表单缓存:

在客户端有一个html文件,用来提交输入信息,问题在于:每次按刷新时,发觉并不是整个页面重新被装载,好似是缓存中。因为文本框中仍出现上次输入的值,只有在地址栏中按回车整个页面才重新装载,应当怎样避免此问题? 

情况二:js文件缓存:

各个浏览器也是拼了命的提高性能,升级js解析引擎,更好的处理浏览器的页面缓存,让用户的浏览体验更快,占用更小的PC资源。那么,问题就出现在JS和css缓存,甚至页面缓存上。至于浏览器对页面的缓存,我们一般通过在服务端发送页面的时候设置页面的生存期,一般几个小时就能缓解很大的服务器压力,并且,对浏览者来讲,本地页面晚更新几个小时可能问题也不大。但,问题是,如果页面发生了更新,但是该页面链接的JS和css文件却被浏览器缓存下来,只有待浏览器重启后才能被删除,甚至有些浏览器重启后也不主动删除JS和CSS的缓存文件。这样页面与JS和CSS文件就可能发生脱节了,从而出现某种异常现象,甚至页面崩溃。更坑爹的现象是,现在用户为了保存自己的工作(娱乐)状态,根本就长时间不关机,当然也不关闭浏览器。从而使得该问题变得更加严重。


清理网站缓存的几种方法

1.meta方法,在html里head区添加代码

//不缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">

2.清理form表单的临时缓存

<body onLoad="JavaScript:document.yourFormName.reset()">

其实form表单的缓存对于我们书写还是有帮助的,一般情况不建议清理,但是有时候为了安全问题等,需要清理一下!

3.jquery ajax清除浏览器缓存

方式一:

用ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control,如下:

$.ajax({
url: 'www.fly63.com',
dataType: 'json',
data: {},
beforeSend: function(xmlHttp) {
xmlHttp.setRequestHeader("If-Modified-Since", "0");
xmlHttp.setRequestHeader("Cache-Control", "no-cache");
},
success: function(response) {
//操作
}
async :false
});

方法二:

直接用cache:false,

$.ajax({
url: 'www.fly63.com',
dataType: 'json',
data: {},
cache: false,
ifModified: true,
success: function(response) {
//操作
}
async :false
});

4.URL文件缓存随机参数清理

方法一:

用随机数,随机数也是避免缓存的一种很不错的方法!URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了

方法二:

用随机时间,和随机数一样。在 URL 参数后加上 "?timestamp=" + new Date().getTime(); 

方法三:

使用方式一或者二,是会导致浏览器每次都要去请求服务端的js文件。占用带宽,作为技术,能不能有种更好的办法呢?既能避免用户的浏览器每次去请求服务端获取js文件。又能在发布新的js代码后,能够使用最新的js文件?

在问号后面加版本号或者文件修改时间,现在很多网站都这么干。

<script type="text/JavaScript" src="/js/common.js?v=99" ></script>

或者

<script type="text/javascript" src="js/common.js?t=20150622" ></script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10851

Nginx禁止html等缓存

在本地开发的时候,经常会碰到缓存引起的莫名其妙的问题,最暴力的方式就是清掉浏览器的缓存,或者使用Ctrl + F5,Shift + F5强制刷新页面。 有时候按了好几下,缓存还是清不掉,只能暂时禁用浏览器静态资源缓存了

angularjs 缓存详解

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。

浏览器端的九大缓存

浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九种

nginx开启gzip压缩和静态缓存

nginx实现资源压缩的原理是通过ngx_http_gzip_module模块拦截请求,并对需要做gzip的类型做gzip压缩,该模块是默认基础的,不需要重新编译,直接开启即可。

缓存的三大问题

业务系统访问压根就不存在的数据,就称为缓存穿透。缓存因某种原因发生了宕机,那么原本被缓存抵挡的海量查询请求就会像疯狗一样涌向数据库。 此时数据库如果抵挡不了这巨大的压力,它就会崩溃。这就是缓存雪崩

使用缓存加速之后的网站访问过程变化

在描述CDN的实现原理之前,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别,用户访问未使用CDN缓存网站的过程为:用户向浏览器提供要访问的域名;

彻底理解浏览器缓存机制

浏览器的缓存机制也就是我们说的 HTTP 缓存机制,其机制是根据 HTTP 报文的缓存标示进行的。所以在分析浏览器缓存之前,我们先使用图文简单介绍一下 HTTP 报文,HTTP 报文分为两种:

清除浏览器缓存的方法

怎么清除浏览器缓存,比如每次进入页面后先清理上次浏览器缓存的html,css,js ? 直接在html页面的head标签中添加,当然这个需要浏览器支持, 不想缓存静态文件,

如何获取最新版的js文件,解决被浏览器缓存的问题

假设有一个js文件(以jquery为例),在服务器上的URL地址为:../js/jquery.js 。当某天jquery版本更新了,用最新版的jquery文件覆盖了原来旧版的jquery文件。这时,在打开引用了此js文件的网页时,有可能引用的还是旧版

缓存一致性的设计

对数据库的热数据进行缓存是一种常见方案,导致缓存数据不一致的因素主要有:高并发导致的,并发写 或者 并发读;数据库主从延迟;当然还有服务异常另当别论;

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!