关于更新发布CSS和JS文件的缓存问题

在Web应用程序大行天下的今天,我们程序员的工作大都基于B/S架构,B/S架构的优势就在于可以及时(甚至随时)更新页面以及后台逻辑,而不用通知客户去手动更新客户端。在这种环境下,是不是B/S架构的软件就真的没有升级的问题了呢?

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

这里提供一种简单并且常用的JS和CSS的缓存解决方案:

注意上面的每个JS文件和CSS文件都加上了一个时间戳作为版本号。

<script type=”text/javascript” src=”{JS文件连接地址}?version=XXXXXXXX”></script>


<link rel=”stylesheet” type=”text/css” href=”{CSS文件连接地址}?version=XXXXXXXX”>

因为浏览器缓存的时候是以URL作为存储单位(还记得POST页面的返回按钮的问题吧?),

从而当每次首页的文件发生更新的时候只需要更改上面的版本号,就能提醒浏览器重新下载该文件了。

时间: 2024-10-12 22:50:34

关于更新发布CSS和JS文件的缓存问题的相关文章

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS

使用System.Web.Optimization对CSS和JS文件合并压缩

在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.App_Start添加: public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Themes/Homecss&q

CSS 和 JS 文件合并工具

写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一. 本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理. CSS 和 JS 合并工具的发展 对于 CSS/JS 合并和压缩的问题, 有很多解决方案, 我所在的团队也经历了几个阶段. 网站刚刚搭建的时候,

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

JQuery 加载 CSS、JS 文件的方法有哪些?

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url=Vz4TlygvnMyYVj105bCuzkusjF0G5rM6opHvEzhcCaJK5s1gFUZ3PBgAWCNsfY1RmtPf4ZEo8EV_Gd7SYKV4S_ 在有Struts部署的Java EE环境中,我们一般把jsp页面写在WebRoot\WEB-INF\content 目录下,

引用外部.css或.js文件的路径问题

转载自:http://www.blogjava.net/Johnny-Ajun/archive/2011/06/16/352440.html jsp或html页面引用外部.css或.js文件时,注意路劲问题,如果设置不当,会引用不到这些外部的文件假设使用下面的目录结构: -webapp |-MyProject  目录  |--WebContent 目录  |---scripts 目录   ---dtree.js 文件  |---styles 目录   ---main.css 文件   |---p

php ci框架中载入css和js文件失败的原因及解决方法

在将html页面整合到ci框架里面的时候,载入css和js失败. 原因是ci框架是入口的框架 对框架中文件的全部请求都须要经过index.php处理完毕,当载入外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 在控制器中须要先加载url相关的类 public function test() { $this->load->helper('url'); $this->load->view('admin/test'); } 在test.php的view视图中.

处理ios webview 更新缓存本地css、js后webview缓存无法更新的问题

项目中需要使用app本地css.js,并且可以根据服务下发自动更新本地css.js.测试发现只要更新后的css或者js和更新前路径一致,webview加载的还是更新前的css.js.怀疑是webview本身缓存了css.js. 使用很多原生方法比如: [[NSURLCache sharedURLCache] removeAllCachedResponses];[[NSURLCache sharedURLCache] setDiskCapacity:0];[[NSURLCache sharedUR