1. <div id="11111"></div>

    1. <div id="11111"></div>

      1. <div id="11111"></div>

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

        日期: 标签:CSS,Web,经验 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」创作共享协议,转载请标注以下信息:
        原文出处:露兜博客 http://www.szeverich.net.cn/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都要重新手动去加版本号

        发表留言

        可以挣钱的游戏 370| 536| 116| 243| 384| 537| 704| 924| 303| 885| 744| 964| 896| 92| 682| 476| 888| 58| 786| 55| 975| 935| 540| 717| 960| 395| 474| 152| 369| 495| 272| 641| 720| 130| 612| 456|