动态生成的 JS/CSS 文件的强制缓存直通标头不适用于所有浏览器答案

【问题标题】：Force cache thru header for dynamic generated JS/CSS files not working for all browsers动态生成的 JS/CSS 文件的强制缓存直通标头不适用于所有浏览器
【发布时间】：2010-10-01 21:08:44
【问题描述】：

我的网站有很多 JS 和 CSS 文件。为了尽量减少来自浏览器的连接请求，我将它们加入到一个 php 文件中。我正在使用标头参数来强制缓存文件。以下是我对 JS 案例的处理方式（CSS 完全一样）：

<?php
ob_start("ob_gzhandler");
$expires= 60 * 60 * 24 * 14;
header('Pragma: public');
header('Cache-Control: max-age=' . $expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expires) . ' GMT');
header('Content-type: text/javascript');
include('file1.js'); echo "\n\n\n";
include('file2.js'); echo "\n\n\n";
/* ... bla bla bla bla ... */
include('fileY.js'); echo "\n\n\n";
include('fileZ.js'); echo "\n\n\n";
ob_end_flush();
?>

这在 Firefox 中运行良好。对于地球的其他地方，这些文件没有缓存！它们都很大，所以我有一个烦人的半秒白屏，以便其他浏览器为每个页面请求一次又一次地加载它们。

我想这与标头的内容长度有关。我尝试了 2-3 件事，但我无法让它发挥作用。有什么建议吗？

提前谢谢你。任何帮助表示感谢。

【问题讨论】：

标签： php javascript css caching header

【解决方案1】：

在项目部署时将所有这些 .js 加入一个文件中并像其他任何文件一样提供该文件是一个好主意，为您的网络服务器配置一个较长的到期时间。

如果您没有部署脚本，那就另当别论了。将标题添加为“Last-Modified”或“ETag”是您最好的选择。

另外，我建议构建一次大文件，并且仅在任何 js 发生更改时才重新构建它。

【讨论】：

谢谢 xPheRe... 我已经接近实现某种方式来自动加入文件。在我发现文件到处缓存的路上。只需花时间从 DOM 中解析，因为它很长。

【解决方案2】：

看起来文件在所有浏览器中都在缓存。

加载延迟的原因是每个浏览器需要解析DOM中的文件的时间。 JS文件很大。只有 Firefox 会更快或更“智能”地做到这一点，这样用户就不会在加载页面时感到瞬间停顿。

这是我的错误，文件没有被缓存。

避免等待的解决方案...在关闭之前移动所有JS请求。

【讨论】：