首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

阻止浏览器缓存链接文件

阻止浏览器缓存链接文件是一种优化网站性能的方法,可以避免浏览器在加载链接文件时使用缓存的版本,从而确保用户始终获取到最新的文件。以下是一些常见的方法来阻止浏览器缓存链接文件:

  1. 使用HTTP头部信息

可以通过在服务器端设置HTTP头部信息来阻止浏览器缓存链接文件。例如,可以设置以下HTTP头部信息:

代码语言:txt
复制
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

这些HTTP头部信息告诉浏览器不要缓存该文件,并且在每次请求时都要重新验证文件是否已更改。

  1. 使用JavaScript

可以使用JavaScript来动态地加载链接文件,从而避免浏览器缓存。例如,可以使用以下JavaScript代码动态地加载CSS文件:

代码语言:javascript
复制
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'styles.css?version=' + new Date().getTime();
document.head.appendChild(link);

这段代码将在链接文件的URL后面添加当前时间戳,从而避免浏览器缓存。

  1. 使用随机字符串

可以在链接文件的URL后面添加一个随机字符串,以避免浏览器缓存。例如,可以使用以下代码生成随机字符串:

代码语言:javascript
复制
function generateRandomString() {
  var length = 10;
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var result = '';
  for (var i = 0; i< length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

然后将生成的随机字符串添加到链接文件的URL中,例如:

代码语言:html
复制
<link rel="stylesheet" href="styles.css?random=<random_string>">

这样,每次加载页面时,链接文件的URL都会发生变化,从而避免浏览器缓存。

总之,阻止浏览器缓存链接文件可以提高网站性能,确保用户始终获取到最新的文件。可以使用HTTP头部信息、JavaScript或随机字符串等方法来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

问题说明 iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度地模拟本地...不过,现在发现了个问题,就是通过主屏幕上点击进入Web APP 形式的网页时候,点击任何一个链接就会跳转到Safari 浏览器并新建一标签页打开所属链接——这个功能真心恶心,如果这样的话还是Web APP...根据作者的叙述,最新的 iOS 7.0.4(iPhone 与 iPad)测试通过,代码应该兼容性不错,在这里分享: //iOS Web APP中点击链接跳转到...Safari 浏览器新标签页的问题 if(("standalone" in window.navigator) && window.navigator.standalone){ var noddy, remotes...event.preventDefault(); document.location.href = noddy.href; } },false); } 建议将代码放到标签前,当然,另外存为一个js 文件引用也是可以的

1.3K30

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

其中一个就是这个iOS Web APP中点击链接跳转到Safari 浏览器新标签页(窗口)的问题。...问题说明 iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度地模拟本地...不过,现在发现了个问题,就是通过主屏幕上点击进入Web APP 形式的网页时候,点击任何一个链接就会跳转到Safari 浏览器并新建一标签页打开所属链接——这个功能真心恶心,如果这样的话还是Web APP...根据作者的叙述,最新的 iOS 7.0.4(iPhone 与 iPad)测试通过,代码应该兼容性不错,在这里分享: //iOS Web APP中点击链接跳转到...event.preventDefault(); document.location.href = noddy.href; } },false); } 建议将代码放到标签前,当然,另外存为一个js 文件引用也是可以的

8.7K100

如何让浏览器缓存文件

浏览器缓存 想知道如何不缓存文件,就需要先了解浏览器是怎么判断是否要缓存文件的。这里要引出一个概念,那就是浏览器缓存。...否,通过服务器来告知缓存是否可用 「用户行为对缓存的影响」 用户操作 Expires/Cache-Control Last-Modied/Etag 地址栏回车 有效 有效 页面链接跳转 有效 有效 新开窗口...浏览器发现文件名有更改,会重新获取静态资源,达到了不缓存文件的目的。 使用HTML禁用缓存 HTML也可以禁用缓存, 即在页面的head标签中加入meta标签。...打包后可以修改配置文件里的值,并且确保浏览器不会对该文件进行缓存后,刷新浏览器便可以得到最新的替换文本。这里我采用了使用随机数的方式来让浏览器缓存文件。...也总结了如何让浏览器缓存文件,方式包括: Cache-control: no-store 静态资源文件增加版本号 静态资源文件增加随机数 使用meta标签禁用缓存 最终使用了静态资源文件后面拼接时间戳的方式来达到不缓存文件的目的

2.3K30

HTTP缓存,浏览器缓存

前端缓存 可分为两大类:http缓存浏览器缓存。我们今天重点讲的是http缓存,所以关于浏览器缓存大家自行去查阅。...下面这张图是前端缓存的一个大致知识点: HTTP 缓存策略分为两种: 强缓存 和 协商缓存 ,这两种缓存策略都是服务端设置 HTTP Header 来实现的 (一)强缓存缓存的意思很简单,直接从浏览器缓存过的本地进行读取...,不会去请求服务器 s-maxage:这个和上面的一样,只不过这个设置的是代理服务器的缓存时间 privte:这个表示缓存只能被客户端的浏览器缓存,不能被代理服务器缓存 public:这个表示缓存既可以被浏览器缓存...协商缓存表示在使用本地的缓存之前,会先向服务器发一个请求,与服务器协商当前浏览器缓存是否已经过期了,如果没过期,那么就使用本地的资源,如果过期了就去请求最新资源。...03.jpg,服务端接收到这个请求后,会读取这个文件的最后修改时间,然后设置到响应头中,设置的参数就是 last-modified,参数值是文件最后修改的时间戳。

81050

微信浏览器阻止弹框

微信浏览器和QQ浏览器有个自带的特殊功能,就是长按会出现上图所示的弹框。有时候前端页面中有长按事件时,总是会触发这个弹框而影响我们自己开发的功能。那么该如何屏蔽这个弹框呢? ...注意不要使用下面这种代码形式(或者类似的方法)来阻止这个弹框: //错误方法 document.addEventListener('touchstart', function(ev){ ev.preventDefault...(); },false); 上面这段代码会阻止页面滚动事件、a标签默认跳转事件等不该屏蔽的事件。...还有当长按事件下有图片时,长按会弹出发送给朋友,保存到手机,收藏的弹框,解决办法是在图片上层盖一个透明层,让长按事件点击不到图片,即可阻止

1.5K20

如何阻止冒泡&&浏览器默认行为

摘要 很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下。...阻止事件冒泡 什么是事件冒泡这里就不再赘述了,网上的文章一大把,这里就简述一下如何阻止事件冒泡,阻止事件冒泡在使用浏览器原生API的情况下,是需要分情况考虑的,毕竟有个个性的浏览器IE,这里分为IE实现和...可以尝试使用return false 阻止浏览器默认行为 在开始之前,首先需要了解什么是浏览器的默认行为,我这里简单举几个例子: 点击a标签,如果设置了href会执行跳转 点击输入框,输入框会获取焦点...点击右键,会弹出浏览器右键菜单 点击submit,会提交其所在表单 点击checkbox 会选中或者反选 还有其他的很多,这里就不一一列举了 同样的对于阻止浏览器默认行为的实现也分为W3C标准实现和IE...; console.dir(event); } } document.addEventListener('wheel', preventCancelableEvents); # 总结 阻止默认冒泡和阻止浏览器默认行为需要关注的是兼容性问题

2K40

浏览器缓存

HTTP header 缓存工作原理 浏览器发起请求的时候,根据请求头的 express 和 cache-control 来判断是否命中强缓存,如果是,怎直接从缓存读取资源,不会发起请求。...如果没有命中强缓存浏览器会发起一个请求到服务端,并通过 last-modified If-modified-since 和 etag if-none-match 判断资源是否命中协商缓存,如果命中,...不会 中断请求,服务器会将这个请求返回(304),但是不会返回资源,资源会从缓存中读取。...如果没有命中缓存,则发起请求,直接从服务器加载资源。...cookie:4kb,可以手动设置过期时间 localStorage:5M,不手动清除一直存在,可以跨标签访问 sessionStorage:5M,不可以跨标签访问,窗口回话结束自己清除 indexDB:浏览器数据库

76910

浏览器缓存

浏览器访问服务器端,服务器给予响应时,服务器会根据需求/场景在响应头里告知浏览器,将以下数据缓存下来:把这次请求得到的响应体缓存到本地文件中标记这次请求的请求方法和请求路径根据服务器返回值,标记缓存(...过期)时间记录服务器这次响应时间,格式为格林威治时间标记录服务器给予的资源编号标记录资源的上一次修改时间,格式为格林威治时间当浏览器再次请求时,会优先去缓存里查找,有没有命中的缓存,没有的话,即立即请求...一般设置其中任意一个字段都可实现强缓存策略,当两个字段同时存在时,max-age优先级会高于Expires。如果命中了强缓存浏览器控制台的http状态码仍旧是200。...可以理解为,没有强缓存,但是会有协商缓存协商缓存如果设置了no-cache,以及max-age(max-age=0为立即过期)过期了,这么着就命中了协商缓存,此时浏览器向服务器端请求,服务器端返回304...,即缓存有效,使用缓存数据;如果返回200,即缓存失效,使用服务器端最新数据除此之外,两者还有以下一些区别:强缓存其实更多的发生在浏览器端,而 协商缓存更多的在服务器端在浏览器强制刷新的情况下,强缓存不会生效

36040

浏览器缓存

浏览器缓存分为强缓存和协商缓存。...源; 强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓 存不对发送请求到服务器,但协商缓存会; 当协商缓存也没命中时,服务器就会将资源发送回客户端; 当 ctrl+f5...强制刷新⽹⻚时,直接从服务器加载,跳过强缓存和协商缓存; 当 f5 刷新⽹⻚时,跳过强缓存,但是会检查协商缓存; 强缓存缓存 表示在缓存期间不需要请求,state code 为 200, 有两种实现方式...:max-age (该字段是 http1.1 的规范,强缓存利⽤其 max-age 值来判断缓存资源的最⼤⽣命周期,它的值单位为秒) 协商缓存 如果缓存过期了,我们就可以使用协商缓存来解决问题。...协商缓存需要请求接口,如果缓存有效会返回304。

73620

浏览器缓存

文章目录[隐藏] 强缓存 协商缓存缓存缓存时,客户端直接从缓训中获取数据。没有时,从服务端取数据。...注意:协商缓存和强缓存的重要区别,强缓存下的客户端请求服务器接收不到,协商缓存下的客户端请求服务端时可以接受到只是做在服务端进行数据对比,判断资源是否更新; 协商缓存与强缓存的区别 强缓存都会访问本地缓存直接验证看是否过期...但协商缓存本地缓存会被忽略,会去请求服务器验证资源是否更新,如果没更新才继续使用本地缓存,此时返回的是 304,这就是协商缓存。协商缓存主要包括 Last-Modified 和 Etag。...Etag(文件唯一标识符) Etag会基于资源生成一串唯一表示符,只要内容不同唯一标识符就不同。...,在使用缓存前,不管缓存资源是否过期了,都必须进行校验 客户端提醒缓存服务器,在使用缓存前,不管缓存资源是否过期了,都必须进行校验 max-age=[秒] 秒 如果缓存资源的缓存时间值小于指定的时间值,

72830

浏览器缓存

本文作者:IMWeb 存勖闲 原文出处:IMWeb社区 未经同意,禁止转载 原文链接:http://www.cun-xu.cn/index.php/2018/12/26/浏览器缓存/ 今天我们来说一下浏览器缓存的问题...浏览器缓存是一种操作简单、效果显著的前端性能优化手段。...快速读取:内存换粗会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以便下次运行时的快速读取 时效性:一旦该进程关闭,则该进程的内存会被清空 硬盘缓存 硬盘缓存- 则是将缓存直接写入硬盘文件中...,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢。...我们发现,Base64格式的图片,几乎永远可以被塞进memory cache,这可以视作浏览器为节省渲染开销的“自保行为”;此外,体积不大的 JS、CSS 文件,也有较大地被写入内存的几率——相比之下,

1.8K10

节点缓存VS浏览器缓存

文件缓存未过期,但源站更新了并希望用户立即访问到新文件,可提交刷新操作,强制清除CDN缓存,触发回源拉取。...浏览器缓存策略: 强制缓存:当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是Expires和Cache-Control...问题描述: 客户反馈将域名vodtest.xiaobli.xyz “全部文件缓存” 的策略删除后,访问如下url文件,CDN节点和浏览器均会缓存住,不符合预期。...如下所示,该域名无浏览器缓存过期配置。在这种场景下,浏览器缓存多久取决于访问某资源时,服务器响应的Cache-Control 或Expires。...客户反馈的这个url,源站没有这2个头部,按理应该不缓存。但由于该文件CDN节点缓存后,会默认加上Cache-Control: max-age=600,才导致浏览器缓存住了。

1.2K81

PHP 浏览器缓存_php缓存引擎

浏览器缓存动态内容,缓存的内容在浏览器本地,而内容由web服务器生成,任何一方都不可能完成这一系列过程,他们之间有一种沟通机制,这就是缓存协商....> 如用ie浏览器访问这个页面时,返回状态码200,连续多次刷新这个页面,这个页面并没有使用本地缓存,也没有向服务器作出任何表示.打开ie的和这个临时文件目录发发现,该缓存文件的”上次修改时间”为无,...浏览器并不知道这个文件的生成时间或上次修改时间,没有过期检查的依据,自然无法使用缓存. last-modified 当在动态程序添加了last-modified后,浏览器请求了该地址,再次刷新该地址会发现请求参数中携带了一个...单击浏览器地址栏的转到按钮或通过超链接浏览器输入url后回车等同于这种操作.这几种方式允许浏览器以最少的请求来获取网页的数据,浏览器对所有没有过期的内容直接使用本地缓存....发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/184309.html原文链接:https://javaforall.cn

2.1K30

浏览器缓存机制浅析--HTTP缓存

非HTTP协议定义缓存 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。...image.png Web服务器告诉浏览器在1981-11-19 08:52:00 这个时间点之前,可以使用缓存文件。...答案是肯定的,那么是否有办法让服务器知道客户端现在存有的缓存文件,其实跟自己所有的文件是一致的,然后直接告诉客户端说“这东西你直接用缓存里的就可以了,我这边没更新过呢,就不再传一次过去了”。...如果某些文件会被定期生成,但有时内容并没有任何变化(仅仅改变了时间),但Last-Modified却改变了,导致文件没法使用缓存 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形...用户操作 Expires/Cache-Control Last-Modified/Etag 地址栏回车 有效 有效 页面链接跳转 有效 有效 新窗口打开 有效 有效 前进、后退 有效 有效 F5刷新 无效

88820
领券