`

防止浏览器缓存css,js静态文件[转]

阅读更多

什么情况下,要禁止静态文件缓存:
1、经常可能要改动的 js, css.
       比如 一个html 文件, test.html 在 1.0版本中。可能是这样
     <script src="common.js"></script>
     修改后  v1.1版本:
 <script src="common.js"></script>
 <script src="foo.js"></script>
   新增加了一个foo.js  同时,也改动了common.js , 在common.js 中定义了新的类,并在foo.js 中使用了common.js. 

在这种情况下如果以前用户浏览过 1.0版本的 html 文件,那么他的浏览器自动缓存了 common.js
当他浏览新版本的时候,因为使用的是 v1.1的 foo.js 和 v1.0的 common.js ,这样将导致脚本出错。


解决方法探讨:
  因为css,js 是通过 <script src=....> 这种方式加载的,所以,很难使用 asp 的那种服务器端禁止缓存的办法。也很难使用ajax的通过设置 http请求头的办法禁止使用缓存。

看来随机数是个好办法。

// 方法一:
document.write( " <script src='test.js?rnd= " + Math.random() + " '></s " + " cript> " )

// 方法二:
var  js = document.createElement( " script " )
js.src
= " test.js " + Math.random()
document.body.appendChild(js)


但是,如果采用随机数的话, js文件将永远得不到缓存,每次都必须重新从服务器加载,即使没有任何更改。
大家如果经常上国外网站的话,可以看到他们通常采用这样的方式来解决:
<script src="test.js?ver=113"></script>
其中 ver=113 的 113就是版本号,一般都是采用 CVS 或其他工具生成的开发版本号。

这样真正做到了应该缓存的时候缓存静态文件,当版本有更新的时候从获取最新的版本,并更新缓存。
对于图像 <img src="test.jps?ver=在CVS的版本号"> 来有效利用和更新缓存.

分享到:
评论

相关推荐

    HTTP+JS+浏览器缓存技术

    浏览器缓存是指浏览器在本地磁盘上存储的静态资源文件,包括HTML、CSS、JavaScript、图片等,以便下一次请求时可以直接从缓存中读取,从而提高网站性能和浏览器速度。浏览器缓存机制可以分为两大类:Expires 策略和 ...

    浏览器缓存查看及恢复工具

    浏览器缓存是网络浏览的重要组成部分,它帮助用户快速加载先前访问过的网页,通过存储静态资源如图片、JavaScript和CSS文件,减少对服务器的请求。本文将深入探讨浏览器缓存的工作原理,以及如何使用“浏览器缓存...

    浏览器缓存读取工具

    浏览器缓存是网络浏览的重要组成部分,它用于存储网页的静态资源,如图片、JavaScript文件、CSS样式表等,以便在用户再次访问同一页面时能够快速加载,提高网页的响应速度和用户体验。`ChromeCacheView`是一款实用的...

    Spring Boot Web 静态文件缓存处理的方法

    Spring Boot Web 静态文件缓存处理的方法 本篇文章主要介绍了在 Spring Boot 中处理静态文件缓存的方法。静态文件缓存处理是 Web 开发中非常重要的一步,特别是在移动设备上访问时,静态文件的加载速度会对用户体验...

    web项目页面缓存清除,不用每次刷新浏览器

    例如,设置Cache-Control为`no-cache`或`no-store`可以防止浏览器缓存页面,`must-revalidate`则要求每次请求都验证资源是否更新。 2. **HTML5的Service Worker**:Service Worker是一种在浏览器后台运行的脚本,它...

    chrome浏览器缓存查看工具

    当用户访问一个网站时,浏览器会将页面上的静态资源(如HTML、CSS、JavaScript文件和图片)保存在本地,以便下次访问同一网站时可以直接从缓存中读取,无需再次从服务器下载。 ChromeCacheView是这个工具的主要执行...

    tomcat下webapps防止刷新报错的静态文件

    为每个静态文件添加一个版本号或时间戳作为文件名的一部分,例如`style-v1.0.css`或`script-20220715.js`。每次更新文件时,更改这个版本号或时间戳,这样浏览器会认为这是一个全新的文件,从而强制获取最新版本,...

    web服务器缓存静态资源,更新静态资源的规则,静态资源如css,js文件 HTTP CODE 304.zip

    在Web开发中,提高网站性能和用户体验的一个关键策略是有效地缓存静态资源,如CSS、JavaScript文件等。静态资源缓存能够减少网络延迟,减轻服务器压力,并加速页面加载时间。以下将详细介绍关于“web服务器缓存静态...

    infrared-remote-浏览器缓存demo

    当用户访问一个网页时,浏览器会将页面上的静态资源(如图片、CSS样式表、JavaScript文件等)存储在本地。这样,当用户再次访问相同页面或相关页面时,浏览器可以直接从缓存中读取这些资源,而无需重新从服务器下载...

    浏览器缓存策略Httpwatch

    Httpwatch是一款强大的工具,用于深入分析浏览器缓存的工作情况。 在Web应用程序的层次结构中,缓存可以存在于多个级别,如数据库缓存、持久层缓存(如Hibernate的一级和二级缓存)、业务层缓存以及浏览器缓存。...

    如何在nginx中配置缓存静态文件

    这样能节省带宽,并且在访问你的网站时会显得更快些(如果用户第二次访问你的网站,将会使用浏览器缓存中的静态文件)。 1、准备事项 我想你需要一个正常工作的 nginx 软件,就像这篇教程里展示的:在Ubuntu 16.04 ...

    在js或css后加?v= 版本号不让浏览器缓存

    在网页开发中,为了优化用户体验,浏览器通常会缓存JavaScript(js)和CSS文件,这样在用户再次访问网站时,可以快速加载页面,减少网络请求。然而,这种缓存机制有时也会成为问题,特别是当开发者更新了js或css文件...

    chrome缓存清除扩展程序,通过js清除chrome缓存的api演示

    缓存能够存储网页的静态资源,如图片、CSS样式表和JavaScript文件,以提高页面加载速度,提升用户体验。然而,有时为了调试或者隐私考虑,我们需要清除这些缓存。本文将详细介绍如何使用Chrome扩展程序以及...

    如何清除浏览器缓存.doc

    浏览器缓存是网络浏览中的一个重要概念,它是一个存储在用户计算机本地的数据空间,用来暂时保存网页的静态资源,如图片、CSS样式表、JavaScript文件等。这样,当用户再次访问同一网页时,浏览器可以直接从缓存中...

    浏览器缓存

    浏览器缓存是为了提高网页加载速度,它会存储之前访问过的网页资源,如图片、CSS、JavaScript等,当用户再次访问相同资源时,浏览器会直接从缓存中读取,而不是向服务器请求。 要解决这个问题,我们需要确保浏览器...

    nginx访问静态文件不下载.rar

    标题 "nginx访问静态文件不下载" 暗示了用户可能遇到了在使用Nginx服务器时,尝试访问静态文件(如HTML、CSS、JavaScript或图片等)却导致浏览器下载文件而不是正常显示的情况。Nginx是一款高性能的HTTP和反向代理...

    浏览器缓存例子浏览器缓存例子浏览器缓存例子浏览器缓存例子

    `www`可能是存放项目静态文件的目录,如HTML、CSS、JS等,它们在浏览器缓存中起着关键作用。 总之,了解并有效地利用浏览器缓存机制,是提升网站性能和用户体验的重要手段。通过合理的配置和管理,可以显著减少网络...

    HTML页面自动清理js、css文件的缓存(自动添加版本号)

    总的来说,自动添加版本号是解决浏览器缓存问题的有效手段,它可以确保用户始终能够获取到最新版本的CSS和JavaScript文件。通过JavaScript、服务器端语言或构建工具,开发者可以轻松地实现这一功能,从而提供更好的...

    一键解决web开发用户浏览器静态资源缓存问题的工具

    处理web静态资源文件在客户端浏览器缓存的工具,java编写的小程序工具。 主要处理js和css文件,将指定目录下所有匹配的js和css文件添加特定的版本号作为文件名,并处理指定目录下所有html文件中对该js或css的引用。 ...

    如何清理浏览器缓存[汇编].pdf

    浏览器缓存是互联网浏览中的一个重要组成部分,它能够存储网页的静态资源,如图片、JavaScript 文件和CSS样式表等,以便用户在再次访问同一网页时能快速加载,提高网页加载速度,减轻服务器负担。然而,当网页内容...

Global site tag (gtag.js) - Google Analytics