tips 前端 阻止 浏览器缓存静态资源

手机浏览器 uc上一直表现良好 qq浏览器还有微信上网址直接打开的(一样采用qq浏览器的内核) 大量缓存了静态资源

css js 图片 等这些当出现改动了刷新网页根本没有效果

电脑端浏览器没有问题 因为部分手机端浏览器 总会出于省流量性能等因素缓存静态资源本来没有什么问题 不过这会给开发带来困扰 不适合调试 如果只是这样还好 可是还是会对生产环境造成一定影响比如当服务器端的css文件内内容有了改动 手机端浏览器却一直没有释放缓存 就会造成一些页面上出现明显的问题所以给css js jpg swf 等加上时间戳是必要的,最好是每当文件做了修改就变动时间戳让浏览器去下载,而没有改动就调用浏览器缓存的文件

所以可以这样

1 <?php $css=‘/xxx/xxx.css‘ ?>
2 <link rel="stylesheet" type="text/css" href="<?php echo "$css" . ‘?time=‘ . filemtime( $css ); ?>" />

note:php 原则上‘‘ ""是通用的,echo函数输出时 ‘ ‘内的内容会被解析为纯字符串, " "内的变量会被解析会变量的值,但是不能解析函数的值 .是php的连接符

    filemtime("file")将得到file最近一次修改时间,得到类似1430451431这个格式的unix时间戳

    原理是通过增加一个后缀改变了请求的文件的url,从而迫使浏览器认为这是不同的文件去下载更新缓存

    最终输出的内容就像 百度云的首页html源代码里这样

<link href="/ppres/static/css/pcloud_feedpage_all.css?t=201504154611" rel="stylesheet" type="text/css"/>

css 文件可以这样加时间戳,其它静态资源也可参照此加

不过开发时也可以直接这样 让它每次都更新时间戳,

<link rel="stylesheet" type="text/css" href="/xx/style.css?time=<?php echo time(); ?> " />

其它语言如jsp asp 等同样可以轻易做到

不过不可以用javascript做 虽然可以用它这样得到时间戳

 1 <script>
 2 var time1=Date.parse(new Date());
 3 var time2=new Date().valueOf();
 4 var time3=new Date().getTime();
 5 console.log(‘timestamp:‘+time1);
 6 console.log(‘timestamp:‘+time2);
 7 console.log(‘timestamp:‘+time3);
 8
 9 /* time1的毫秒部分将是000,不会计算毫秒
10  time2,time3会记录精确到毫秒,且结果相同 */
11 </script>

但是是没有意义的,在客户端即使插入到了引用路径中也是也是没有意义 因为请求是向服务器端发的 需要考虑一个是执行加时间戳的时间上 一个是服务器端的路由控制

wordpress下也可以参照这样

来自winy:http://www.hilau.com/1311273.html   /or/  http://www.laozhuhome.com/html/automatically-version-your-css-and-javascript-files

用grunt作前端工作流时更可以使用这样一个tool

automatic-version-increment

很多方式,选喜欢的吧!

时间: 2024-10-13 06:29:47

tips 前端 阻止 浏览器缓存静态资源的相关文章

tomcat缓存静态资源深入

之前看过apach及nginx对于静态资源(含js,图片,css等)部分的缓存,用于加速并减轻后台实际web服务器的压力. 静态资源缓存是WEB服务器优化的一种手段,基本原理如下: 1.客户端浏览器请求服务器一个服务(该服务含有图片,js等静态资源),通常会对于每一个网页中的独立图片或js文件发送一个http请求 2.WEB服务器对于每个资源HTTP请求进行解析,并生成一个资源修改时间的唯一值(可以是etag或last_modified参数),放入服务器端map,key为资源url,value为

Filter 禁止浏览器缓存动态资源,例如JSP资源 -学习笔记

当访问一个web资源时,没有得到对应的结果,有可能是Filter没有放行资源静态资源和动态资源进行不同的缓存处理,代码如下:====NO2判段是否以jsp结尾 处 import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; imp

ASP.NET Core缓存静态资源

原文:ASP.NET Core缓存静态资源 背景 缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能.在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间.在服务器端,由于它们的请求较少,服务器可以处理更多的客户端而无需升级硬件. 虽然缓存是一件好事,但您必须确保客户端始终运行最新版本的应用程序.当您部署下一个版本的网站时,您不希望客户端使用过时的缓存版本的文件. 方案: 为确保用户始终使用最新版本的文件,我们必须为每个文件

nginx缓存静态资源,只需几个配置提升10倍页面加载速度

nginx缓存静态资源,只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下,这个页面发送了很多静态资源的请求: 1.png 可以看到,静态资源占用了整个页面加载用时的90%以上,而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小,如果没有对这些静态资源压缩的话,那么静态资源加载应该会占用这个页面展示99%以上的时间.听起来是不是已经被吓到了,但是数据已经摆在这里了,这可不是危言耸听. 然后再看看使用了nginx缓存之后的效果图: 2.png 看到没有,朋友们

apache下用expires_module让浏览器缓存静态文件

apache下用expires_module让浏览器缓存静态文件 apache配置静态缓存的原因: 第一点,       减轻服务器的压力. 第二点,       省去浏览器经常要去服务端下载CSS.JS.图片.静态文件等,减小不必要的网络IO. 配置步骤: 1. 在apache主配置文件中开启apache扩展模块mod_expires.so,命令: Vi /usr/local/apache2/conf/httpd.conf,如下图所示: 2. 配置缓存,在apache的虚拟主机(/usr/lo

nginx在windows下配置缓存服务器缓存静态资源+Tomcat集群

nginx安装目录 修改nginx.conf文件配置负载均衡配置Tomcat集群并设置动静分离 #user nobody; error_log logs/error.log; worker_processes 2; worker_rlimit_nofile 1024; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request&quo

解决前端向后端请求静态资源的问题(基于express框架)

请求js,css,image资源: 前端 <script src='后端url/assets/js/xxx.js‘>,<link href='后端url/assets/css/xxx.css' >,<img src='后端url/assets/image/xxx.jpg' > 后端 app.use('/assets',express.static('assets')) 当require.url以/assets开头则在assets文件夹中寻找对应的文件 原文地址:http

互联网企业静态资源的部署,如何充分利用浏览器缓存机制

浏览器获取静态资源方式:缓存.版本 从html文件中解析出静态资源的url,查看本地缓存是否存在.是否过期,是否需要重新获取.根据url全路径匹配查找是否存在,根据header的字段expire/cache-control等判断是否过期. 所谓版本信息,不过是静态资源url的一部分信息,通过修改服务器html里静态资源的版本信息,达到修改静态资源url路径的目的,从而实现客户端浏览器重新下载静态资源的目的. 版本示例:http://xx.x.x.x:8083/static/dll/vendor1

浏览器缓存机制剖析

缓存一直是前端优化的主战场, 利用好缓存就成功了一半. 本篇从http请求和响应的头域入手, 让你对浏览器缓存有个整体的概念. 最终你会发现强缓存, 协商缓存 和 启发式缓存是如此的简单. 导读 浏览器对于请求资源, 拥有一系列成熟的缓存策略. 按照发生的时间顺序分别为存储策略, 过期策略, 协商策略, 其中存储策略在收到响应后应用, 过期策略, 协商策略在发送请求前应用. 流程图如下所示. 发起请求是否已缓存?[过期策略]-缓存是否过期?[协商策略]-重新向服务器发起验证验证是否通过?304响