如何强制浏览器重新加载缓存的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 | 热门文章
        

            

                                

                    1Facebook Instant Articles错误"HTML元素不包含任何文本:避免包含空HTML元素"
                
                                

                    2在卫兵中使用功能时的二郎"非法守卫表达"
                
                                

                    3添加剂,半添加剂和非添加剂措施之间的区别是什么
                
                                

                    4使用Composer安装高级Wordpress主题
                
                                

                    5关于C++中的复制控制
                
                                

                    6HTTP状态403  - 未找到预期的CSRF令牌.你的会话已经过期了吗？
                
                                

                    7将cURL转换为Guzzle POST
                
                                

                    8在自定义UIView中添加自动布局约束代码的位置
                
                                

                    9为什么我的swagger.json是空的？ -  RestEasy,Wildfly上的Java
                
                                

                    10适用于Visual Studio 2015 Update 1的MicroUpdate 1.1
                
                                

                    11如何将动态变量传递到ASP.NET MVC中的authorize属性类中？
                
                                

                    12Spark使用上一行的值向数据框添加新列
                
                                

                    13在基于buildout的Plone站点中使用非最新的git checkout
                
                                

                    14INSERT INTO语句不起作用
                
                                

                    15如何通过Play设置HikariCP池大小
                
                                

                    16在多行中连接python中的字符串
                
                                

                    17Aurelia的角度服务？
                
                                

                    18Android gps提供商和gps图标
                
                                

                    19在C++中查找两个字符串是否为字谜
                
                                

                    20计算defaultdict列表中的特定项目