如何强制浏览器重新加载缓存的CSS/JS文件？

我建议您使用实际CSS文件的MD5哈希,而不是手动更改版本.

所以你的网址会是这样的

http://mysite.com/css/[md5_hash_here]/style.css

您仍然可以使用重写规则去除散列,但优点是现在您可以将缓存策略设置为"永久缓存",因为如果URL相同,则表示文件未更改.

然后,您可以编写一个简单的shell脚本来计算文件的哈希并更新您的标记(您可能希望将其移动到单独的文件中以便包含).

每次CSS更改时,只需运行该脚本即可.浏览器只会在更改文件时重新加载.如果您进行编辑然后撤消它,那么确定您需要返回哪个版本以便访问者不要重新下载是没有意义的.

不确定为什么你们为实施这个解决方案付出了太多的痛苦.

如果获取文件的修改时间戳并将其作为查询字符串附加到文件,则需要执行的操作

在PHP中,我会这样做:

filemtime是一个返回文件修改时间戳的PHP函数.

您可以放在?foo=1234css/js导入的末尾,将1234更改为您喜欢的任何内容.看一下SO html源代码示例.

这个想法有吗？无论如何,请求都会丢弃/忽略参数,您可以在推出新版本时更改该数字.

注意:关于它如何影响缓存有一些争论.我相信它的一般要点是有或没有参数的GET请求应该是可缓存的,因此上述解决方案应该可行.

但是,由Web服务器决定是否要遵守规范的那一部分以及用户使用的浏览器,因为它可以直接进入并要求提供新版本.

我听说这个叫做"自动版本控制".最常见的方法是在URL中的某处包含静态文件的mtime,并使用重写处理程序或URL confs将其删除:

也可以看看:

Django中的自动资产版本控制

自动版本您的CSS和JavaScript文件

对于大约2008年的网站,30个左右的现有答案是很好的建议.然而,当涉及到现代的单页面应用程序(SPA)时,可能是时候重新思考一些基本假设了......特别是Web服务器只需要提供单个最新版本的服务的想法文件.

想象一下,您是一个在浏览器中加载了SPA 版本M的用户:

您的CD管道将应用程序的新版本N部署到服务器上

您在SPA中导航,它将XHR发送到服务器以获取 /some.template

(您的浏览器尚未刷新页面,因此您仍在运行M版本)

服务器响应内容/some.template- 您是否希望它返回模板的版本M或N？

如果/some.template版本M和N之间的格式发生了变化(或文件被重命名或其他),您可能不希望将模板的版本N发送到运行解析器的旧版本M的浏览器.†

满足两个条件时,Web应用程序会遇到此问题:

在初始页面加载后的某个时间异步请求资源

应用程序逻辑假设有关资源内容的事情(可能在将来的版本中有所改变)

一旦您的应用程序需要并行提供多个版本,解决缓存和"重新加载"变得微不足道:

安装所有站点文件到版本迪尔斯:/v/…files…,/v/…files…

设置HTTP标头以允许浏览器永久缓存文件

(或者更好的是,将所有内容都放在CDN中)

更新所有

和CSS类似



14> Michiel..：

---

有趣的帖子.阅读完这里的所有答案,结合我从未遇到过"伪造"查询字符串的任何问题(我不确定为什么每个人都不愿意使用这个)我猜这个解决方案(不需要apache重写规则)如在接受的答案中)是计算CSS文件内容的短HASH(而不是文件日期时间)作为伪造的查询字符串.

这将导致以下结果:

当然,日期时间解决方案也可以在编辑CSS文件的情况下完成工作,但我认为它是关于css文件内容而不是文件日期时间,那么为什么要将这些混合起来？



15> Frank Bryce..：

---

对于我的开发，我发现chrome有很好的解决方案。

https://developer.chrome.com/devtools/docs/tips-and-tricks#hard-reload

在开发人员工具打开的情况下，只需长按刷新按钮，然后将鼠标悬停在“空缓存和硬重载”上就可以释放。

这是我最好的朋友，并且是获得您想要的东西的超轻量级方法！



16> lony..：

---

感谢Kip的完美解决方案!

我扩展它以将其用作Zend_view_Helper.因为我的客户端在虚拟主机上运行他的页面,我也为此扩展了它.

希望它也可以帮助其他人.

/**
 * Extend filepath with timestamp to force browser to
 * automatically refresh them if they are updated
 *
 * This is based on Kip's version, but now
 * also works on virtual hosts
 * @link http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
 *
 * Usage:
 * - extend your .htaccess file with
 * # Route for My_View_Helper_AutoRefreshRewriter
 * # which extends files with there timestamp so if these
 * # are updated a automatic refresh should occur
 * # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
 * - then use it in your view script like
 * $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
 *
 */
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {

    public function autoRefreshRewriter($filePath) {

        if (strpos($filePath, '/') !== 0) {

            // path has no leading '/'
            return $filePath;
        } elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {

            // file exists under normal path
            // so build path based on this
            $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
            return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
        } else {

            // fetch directory of index.php file (file from all others are included)
            // and get only the directory
            $indexFilePath = dirname(current(get_included_files()));

            // check if file exist relativ to index file
            if (file_exists($indexFilePath . $filePath)) {

                // get timestamp based on this relativ path
                $mtime = filemtime($indexFilePath . $filePath);

                // write generated timestamp to path
                // but use old path not the relativ one
                return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
            } else {

                return $filePath;
            }
        }
    }

}

干杯谢谢.



17> 小智..：

---

尚未找到客户端DOM方法动态创建脚本节点(或css)元素:



18> unknown123..：

---

谷歌浏览器具有“ 硬重装 ”以及“ 清空缓存和硬重装”选项。您可以单击并按住“重装”按钮（在检查模式下）以选择一个。



19> helios..：

---

如果将session-id添加为js/css文件的spureous参数,则可以强制执行"会话范围的缓存":

如果您想要版本范围的缓存,可以添加一些代码来打印文件日期或类似内容.如果您使用的是Java,则可以使用自定义标记以优雅的方式生成链接.



20> Walter Rumsb..：

---

假设您有一个文件可用于:

/styles/screen.css

您可以将带有版本信息的查询参数附加到URI上,例如:

/styles/screen.css?v=1234

或者您可以添加版本信息,例如:

/v/1234/styles/screen.css

恕我直言,第二种方法更适合CSS文件,因为它们可以使用相对URL引用图像,这意味着如果你指定background-image如此:

body {
    background-image: url('images/happy.gif');
}

它的URL实际上是:

/v/1234/styles/images/happy.gif

这意味着如果更新使用的版本号,服务器会将其视为新资源,而不是使用缓存版本.如果您的版本号基于Subversion/CVS/etc.修订这意味着将注意到对CSS文件中引用的图像的更改.不与第一方案保证,即URL images/happy.gif相对/styles/screen.css?v=1235是/styles/images/happy.gif不包含任何版本信息.

我已经使用Java servlet使用这种技术实现了一个缓存解决方案,并简单地处理/v/*委托给底层资源(即/styles/screen.css)的servlet的请求.在开发模式中,我设置了缓存标头,告诉客户端始终使用服务器检查资源的新鲜度(在部署模式下,如果您委托给Tomcat,DefaultServlet并且等文件没有更改,这通常会导致304 )我设置标题"永远缓存"..css.js



21> Ponmudi VN..：

---

你可以简单地用CSS/JS url添加一些随机数

example.css?randomNo=Math.random()



22> Ivan Kochurk..：

---

对于ASP.NET,我认为下一个解决方案具有高级选项(调试/发布模式,版本):

通过这种方式包含的Js或Css文件:

    


    

        

            
            

                
                    
                
            

            

                jerry613            

            

                这个屌丝很懒，什么也没留下！            
            
            


                                
                    
                    关注作者
                            

        
    


    

        
Tags | 热门标签
        

            

                                

                    actionscrip
                
                                

                    bash
                
                                

                    c#
                
                                

                    c++
                
                                

                    c语言
                
                                

                    erlang
                
                                

                    flutter
                
                                

                    go
                
                                

                    golang
                
                                

                    java
                
                                

                    javascript
                
                                

                    lua
                
                                

                    node.js
                
                                

                    perl
                
                                

                    php
                
                                

                    python
                
                                

                    scala
                
                                

                    typescript
                
                                

            
        
    


    

        
RankList | 热门文章
        

            

                                

                    1Android会在键入时自动将EditText的内容移动到下一行
                
                                

                    2在Excel 2010 Powerpivot Addin中为SQL Server 2008 R2中的每个连接表键入密码
                
                                

                    3是否可以删除列表列表中的项目而不会丢失原始引用？
                
                                

                    4从td标签BeautifulSoup Python获取href属性链接
                
                                

                    5按日期按日期在php中按日期排序数组
                
                                

                    6java中的键值对实现？
                
                                

                    7如何在Windows 8中将十六进制代码转换为颜色
                
                                

                    8错误:Android Dex:找不到文件\ android-sdk-path\platform-tools\lib\dx.jar
                
                                

                    9正则表达式提取部分字符串
                
                                

                    10如何实现和定义接收
                
                                

                    11实体框架代码第一个通用数据库审计字段
                
                                

                    12Java将StringBuilder转换为CharBuffer
                
                                

                    13是否需要实现接口方法
                
                                

                    14如何使用vs2012部署mvc 3/4
                
                                

                    15Symfony2  - > Twig  - > Form  - > Field  - > Set rendered = true
                
                                

                    16访问golang模板循环中的循环值
                
                                

                    17从Angular中的模块中删除指令
                
                                

                    18在python线程中关闭侦听套接字
                
                                

                    19Spring security 3 http-basic authentication-success-handler
                
                                

                    20包含布局的根视图上的NullPointerException