HTML中css和js链接中的版本号

日期: 标签:CSSWeb经验 44 条留言
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
文章目录

背景

     在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量。

问题

     现在问题来了,.htaccess设置的css、js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css、js,在这些css、js缓存未过期之前,浏览器只会从缓存中读取css和js,如果你在服务器上修改了css和js,那么这些更改在回头客的浏览器中是不会有变化的,除非回头客按了Ctrl + F5刷新了你的网站页面或者手动清空了浏览器的缓存。一个网站的访客成千上万,回头客也会有不少,你不可能在更新css后让每个访客都刷新一下缓存吧,那么这个问题你会怎么处理呢?

方法一

     更改css文件名:其实解决这个问题很简单,缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后,在更换一下css的文件名就可以了。如原先html中的css调用语句如下:

<link rel="stylesheet" href="style.css" />

     改一下css文件名就可以了:

<link rel="stylesheet" href="index.css" />

     另外一种更改css文件名的方法是将版本号写到文件名中,如:

<link rel="stylesheet" href="index.v2011.css" />

     css文件更新后,改一下文件名中的版本号即可:

<link rel="stylesheet" href="index.v2012.css" />

方法二

     给css文件加个版本号:其实每次修改css文件后还要修改css的文件名有点麻烦,那么我们可以在加载css语句中加入个版本号(即css链接中?后面的内容)就可以了。如原先html中的css调用语句如下:

<link rel="stylesheet" href="style.css?v=2011" />

     改一下css文件的版本号改成2012就可以了:

<link rel="stylesheet" href="style.css?v=2012" />

     需要注意的是,部分代理缓存服务器不会缓存网址中包含 "?" 的资源,所以方法二可能会导致你原先的缓存功能失效,可以改用第一种方法。

总结

     其实css文件后面的问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。一个小小的细节,可以给我们带来很大的方便。

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/css-version.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

44 条留言

点此留言
  1. Laycher

    第二种方法中,css文件需要改什么东西?不需要改?

    • Ludou

      @Laycher 看来我写这篇文章挺失败的。

      • Laycher

        @Ludou 没有啊,我只是觉得很奇怪,改加载语句,不用改CSS中的任何东西,这样可以的吗?我不懂的,请见谅。

        • 独自流浪

          @Laycher 他的意思是,当你修改了CSS文件后,由于服务器.htaccess的作用,给CSS设置了缓存,客户访问网站的时候,并不会加载你修改的CSS文件,而是继续使用浏览器缓存。

          通过方法2给CSS加版本号,浏览器会认为是另外一个文件,就去更新CSS

  2. 小不点

    好久没更新文章了哦呦

  3. 陌凡

    呵呵,过来学习

  4. kanney

    虽然不是很懂技术,还是过来支持一下。

  5. 老k博客

    用yslow检查网站的时候,会一项是指出引用css或者js文件后面的?号带参数会影响网站性能。想请教一下ludou兄,在这方面有什么好的建议不,谢谢

    • Ludou

      @老k博客 我也用Yslow,从没见过这个提示。你把Yslow的那项的名称以及提示的内容贴出来看看。

      • jeslie

        @Ludou 加个问号应该每次都会向服务器发送请求,来获取该文件版本号信息吧?否则也就没有意义了。网上资料说:这样做是为了不让浏览器缓存,强制从服务器刷新一次,从而避免改了css后无效果。

        • Ludou

          @jeslie 你可以参考这两篇文档:
          http://stackoverflow.com/questions/4363626/use-of-a-css-stylesheet-url-with-parameters
          http://stackoverflow.com/questions/3131518/why-pass-parameters-to-css-and-javascript-link-files-like-src-cnt-jsver-4-0

        • Ludou

          @jeslie 你可以自己做一下实验,给css链接加个问号,并通过.htaccess设置css缓存。
          在你的浏览器中缓存网页之后,再改一下css的内容,不改css链接问号后面的内容,不刷新网页,看看是不是每次访问的都是最新的css。

  6. 有点蓝

    终于在订阅里看到了更新,真不容易呀。

    • Ludou

      @有点蓝 由于工作原因,被派往外地半年,没法接触互联网,所以这半年没更新。

  7. 猫10

    作为博主的重视粉丝,看到博主更新,我激动的泪流满面。

    • Ludou

      @猫10 由于工作原因,被派往外地半年,没法接触互联网,所以这半年没更新了。

  8. 浩子

    呵呵
    我也是看更新了过来看看

  9. lugu

    你总算复活了。。。

  10. 子非我

    欢迎大师归来

  11. 邓超

    是呀,好久没有看到你了

  12. 一堵墙

    用了缓存插件应该不用怕这个了吧

  13. 老纳

    我在chinaz看见你的地址还以为弄错了

    好久都不见你更新拉

  14. AceLee

    =。=|| 总算知道点加"?version"的用处了~我说咋现在看到的很多站的CSS和JS的地址都是带这个的~
    顶一个~

    • 917ht

      @AceLee 怪不得,我用yslow检查我的网站,老是看到我添加的百度分享的几个js和css后面都有版本信息,而且还是用的? cdnversion

  15. 帅哥

    话说,终于更新了…

  16. Sola

    我昨天也在想这个问题,最近更新样式表很频繁,我采用的是第三种方法,加版本号。没想到今天就看到博主的文章,要是昨天看到就好了,不用费劲想了。。。

  17. 云淡然

    最简单的办法

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

    这样每次刷新都是最新的style.css

    • Ludou

      @云淡然 那么服务器端的缓存设置就没有任何意义了!

      • 云淡然

        @Ludou 不需要常修改的,如js库、基本的css样式等就不需要这么写了。

    • shinife

      @云淡然 在functions.php加入:
      function ver($url){
      $ver = filemtime($_SERVER['DOCUMENT_ROOT'].$url);
      echo $url.'?v='.date("Ymd-H",$ver);
      }
      调用:<link rel="stylesheet" type="text/css" href="<?php ver( '/wp-content/themes/d/style.css'); ?>" />,版本号是最后修改日期,我用的就是这个方案。

      • Ludou

        @shinife 很不错的方法,推荐!

      • 三四十

        @shinife 修改了style.css才会刷新缓存,不修改永远不刷新缓存,很赞的方法!

      • jing

        @shinife function AutoVersion( $file ) {
        if( file_exists($_SERVER['DOCUMENT_ROOT'].$file) ) {
        $ver = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
        } else {
        $ver = 1;
        }

        return $file .'?v=' .$ver;
        }

  18. 千与琥珀

    露兜兄回归了,呵呵
    怪不得我在某些css后面看到问号参数,原来是这样,不过个人还是觉得改文件名实在些,哪怕是缓存文件,某些浏览器看到这种参数后还是会再向服务器请求比较一次,改文件名就不会,能少一次请求就少一次请求……

  19. 海纳百川

    学习啦,缓存不太懂。

  20. NONO

    外链的js和css文件如何设定缓存呢?

  21. 测试

    这是啥啊 哈哈哈

  22. fenotes

    nice

  23. ican

    求解,加版本号是手动给每个请求加还是用程序控制自动加还是怎么加?

  24. 小虾米

    是不是每修改一次css都要重新手动去加版本号

发表留言