如何自动刷新缓存的 CSS 和 JavaScript

在启用缓存的情况下编辑静态 JavaScript 和 CSS 文件时,浏览器通常不会获取更改,而是加载缓存版本。
这可能会导致用户布局错误,并使处理文件的开发人员感到困惑。

该问题的解决方案是在 URL 参数中将版本号添加到文件中。
在 PHP 中,我们可以简单地获取文件内容上次更改的时间,然后将其用作 URL 参数值。

$template_css_file = '/css/general.css';
$template_css_file = $template_css_file . '?v=' . filemtime($_SERVER["DOCUMENT_ROOT"] . $template_css_file);

filemtime 函数可以返回上次修改文件的时间,如果由于某种原因函数失败,将返回 false 而不是时间戳。

每当我们编辑文件时,URL 参数都会自动更新,这将使浏览器将该文件视为不同的文件,并重新下载该文件而不是加载过时的缓存副本。

动态内容

动态内容也有类似的问题,但最好通过在修改源时手动更新缓存来解决这个问题,因为检查每个 .php 文件中的文件更改可能会占用大量资源,尤其是在每次请求时都这样做。

如果我们确实计划为动态文件添加文件检查,我们应该研究 Etag 标头的使用,并避免对每个请求执行检查。

日期:2020-06-02 22:16:54 来源:oir作者:oir