你的位置:快乐忆站 \ 前端 \ 文章正文

给静态资源添加查询字符串

想这个标题都想了我很长时间了,不知道怎么写才合适,通俗的讲就是在css或js后面加上?t=xxxxxx或者直接加上?xxxxxx之类的查询字符串,当然,后面的xxxxx通常为文件的最后修改时间,比如本站的css加载http://xiaosong.org/content/templates/xiaosong/main.css?t=20110827113539,后面的就是css文件的最新修改时间,又比如淘宝网的css加载http://a.tbcdn.cn/??p/global/1.0/global-min.css?t=2011081120110301.css,后面的也是一串与时间有关的字符串,其实我就是学的淘宝的方式~

加上查询字符串的好处是修改查询字符串后即使静态文件(如css或js)未做任何修改,但是浏览器还是会去请求这个文件,而不是从缓存中去加载。我们在修改我们的静态文件(如修改css样式)后,我们总是希望访客下载到的是修改过的文件,而不是浏览器缓存里面的未修改的文件,所以,加上查询字符串就能强制浏览器下载最新修改过的文件,这样我们就能把修改后的效果第一时间呈现给访客,而不用等待访客去清空缓存或者缓存过期,个人觉得很不错的一个方法。

那么我们后面的查询字符串该加些什么好呢?最简单的办法莫过于加上文件的最后修改时间了,这样只要我们修改了文件,访客访问后立马就能看到最新效果。下面我就说说的我的实现方法(通过php的filemtime()函数获取最后修改时间的时间戳,然后转换成日期作为查询字符串,附加到css或js文件后面),看代码:

<?php
$cssTime = filemtime(TEMPLATE_PATH.'main.css');
?>
<link href="<?php echo TEMPLATE_URL; ?>main.css?t=<?php echo date('YmdGis',$cssTime) ?>" type="text/css" rel="stylesheet" />

当然,上面是emlog的实现方法,如果是其他网站,方法类似,原理都是一样的。

这么一修改的话,如果你修改了css文件后传导服务器上,php输出后会自动加上最后修改时间的查询字符串,保证用户下载的是最新的css文件,不需要自己在模板源码中去修改查询字符串,如果你没有修改过文件,那么文件的查询字符串不会变,你的文件照样能被浏览器缓存下来,所以我觉得此法henkexi。

不过,这个方法是不被谷歌的“page speed”认可,“page speed”认为加入查询字符串会导致一些代理服务器不缓存这些静态资源,见下图:

page speed

个人觉得加上并无大碍,毕竟淘宝他们也是这么做的~肯定有他们的道理在。

« 上一篇:九月桂花香
大家的话:
  1. 26#
    Mucid
    2011-09-11 22:50
    介个,介个,对于鹚来版小时清理一次cookies和缓存的来说
    小松
    2011-09-12 00:02
    @Mucid:哈哈,缓存对你来说就是浮云。。。
  2. 25#
    空间
    2011-09-10 11:49
    不错啊
  3. 24#
    林西老九
    2011-09-01 12:21
    哈哈,点了下广告
    小松
    2011-09-04 13:30
    @林西老九:很不错啊,犀利
  4. 23#
    林西老九
    2011-09-01 12:19
    啥意思?
  5. 22#
    振动监测
    2011-09-01 11:21
    踩踩,支持支持~
  6. 21#
    cuiqingyao
    2011-08-31 11:08
    技术博客,不错。。。。。。。。。。
  7. 20#
    俊文
    2011-08-31 10:39
    天书终于看完了。。。
    小松
    2011-09-04 13:30
    @俊文:哈哈,这个其实不用看完的,看关键就行了
  8. 19#

    2011-08-31 09:49
    小松越来越强大了
    小松
    2011-09-04 13:27
    @搜:搜搜也很强大啊,哈哈
  9. 18#
    MINI
    2011-08-31 02:39
    能不能帮个忙,把评论改成嵌套形式的,多谢!!
    小松
    2011-08-31 09:30
    @MINI:这个我真帮不了你。。。
  10. 17#
    丰禾棋牌
    2011-08-30 12:29
    话说这些东西目前还用不上 不过收藏了
  11. 16#
    wmtimes
    2011-08-30 01:16
    原来是网络问题。发了吧。
    小松
    2011-08-30 09:13
    @wmtimes:呵呵,插件把你屏蔽了。。。
  12. 15#
    wmtimes
    2011-08-30 01:15
    怎么发不了言,我就不信了。
  13. 14#
    wmtimes
    2011-08-30 01:12
    小松最近在忙什么啊。
    小松
    2011-08-30 09:13
    @wmtimes:工作,工作之余小折腾一下~
  14. 13#
    Ray Chow
    2011-08-29 23:29
    不过你用的不是WordPress
  15. 12#
    Ray Chow
    2011-08-29 23:28
    使用 WordPress 提供的方法插入 JS,后面会跟上主题或者插件版本号参数的,这样升级的时候就会改变。
    小松
    2011-08-30 09:14
    @Ray Chow:wp是挺人性的,不过修改也是一点点代码,还行~
  16. 11#
    小子
    2011-08-29 19:43
    小松,这么多js 你不知道卡吗,你妹
    小松
    2011-08-29 20:55
    @小子:你妹,我这叫js多啊?
  17. 10#
    崔可
    2011-08-29 12:22
    我倒是见过好几个站这样用,感觉还可以。
    小松
    2011-08-29 12:49
    @崔可:这样还是有很多好处的~
  18. 9#
    广州SEO
    2011-08-28 19:35
    技术性东西,先看看,然后效仿一下。
  19. 8#
    踏雪残情
    2011-08-28 17:37
    ^^,这个方法不错。
    小松
    2011-08-28 17:54
    @踏雪残情:这个省去了自己添加查询字符串的麻烦,还能告诉浏览器什么时候该缓存,什么时候不要缓存~
  20. 7#
    流氓兔
    2011-08-28 16:57
    这个先了解下,因为俺不懂
    小松
    2011-08-28 17:55
    @流氓兔:哈哈,其实很简单,就是让程序来控制浏览器对静态文件的缓存
  21. 6#

    2011-08-28 14:46
    越来越厉害了
    小松
    2011-08-28 17:55
    @搜:搜搜路过,给力啊
  22. 5#
    卡其
    2011-08-28 12:54
    深奥的技术贴啊~~小白路过转转
  23. 4#
    IM路人
    2011-08-27 20:59
    恩,有利于缓存~~~
    小松
    2011-08-27 21:14
    @IM路人:真不是有利于缓存,是有利于更新文件后第一时间呈现最新的代码给访客~
  24. 3#
    sprityaoyao
    2011-08-27 18:27
    哦,给CSS家缓存呀。
    小松
    2011-08-27 18:56
    @sprityaoyao:你还没理解本文的用意。。。
    sprityaoyao
    2011-08-27 18:59
    @小松:哦,修改之后,如果不是强制刷新,看到的还是旧的CSS,这样的话就是能够是浏览器获取最新的CSS文件,我是这样理解的
    小松
    2011-08-27 19:06
    @sprityaoyao:就是这样的,修改后自动获取最新的css文件,不用强制刷新浏览器~
  25. 2#
    老王
    2011-08-27 15:23
    小白提问:怎么定义多个文件呢?或者定义某个文件夹下所有CSS文件,有没有可用的通配符呢?
    小松
    2011-08-27 16:08
    @老王:没办法,一个个去添加
    老王
    2011-08-27 16:15
    @小松:我还在想能用通配符就方便了,一行搞定。
    小松
    2011-08-27 18:24
    @老王:这个可能有办法,但是我没办法…对了,你那边能不能不要跟我一起改,我有点接受不了,谢谢啦
    老王
    2011-08-27 19:43
    @小松:好的,下回注意。
    小松
    2011-08-27 20:00
    @老王:好吧,下回不带这样玩的。。。
  26. 1#
    随缘
    2011-08-27 13:10
    原来是这样的啊,很多网站都这样搞
    小松
    2011-08-27 13:13
    @随缘:呵呵,这样好处还是挺多的~
    随缘
    2011-08-27 13:14
    @小松:速度真快啊
    小松
    2011-08-27 13:16
    @随缘:刚发完文章,人还在的,然后今天又是休息的,所以就比较快了点~

随机日志:

推荐日志:

说两句吧:

正在回复: 取消

sitemap