可以缓存具有动态 JavaScript 链接的 HTML 页面吗？答案

【问题标题】：Can an HTML page be cached which has a link to dynamic JavaScript?可以缓存具有动态 JavaScript 链接的 HTML 页面吗？
【发布时间】：2013-11-05 19:23:31
【问题描述】：

能否让浏览器缓存 myPage.html 和 myStaticJS.js，但不缓存 myDynamicJS.php？我已经测试了以下内容，myDynamicJS.php 肯定没有被缓存在我的 FF 浏览器上（时间发生变化），但是查看我的 Apache 访问日志显示 myPage.html 和 myStaticJS.js 也没有被缓存。

myPage.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>What time is it?</title>
        <script src="myDynamicJS.php"></script>
    </head>
    <body>
        <div>My static cached HTML</div>
        <div>The time is <span id="now"></span></div>
    </body>
    <script src="myStaticJS.js"></script>
</html>

myDynamicJS.php

<?php
    header( 'Content-type: text/javascript' );
    date_default_timezone_set('UTC');
    echo('var now="'.date("Y-m-d H:i:s").'";');
?>

myStaticJS.js

document.getElementById("now").innerHTML=now;

【问题讨论】：

标签： javascript php jquery http caching

【解决方案1】：

是的，你可以让它不被缓存。通过 php 中的缓存控制头：

header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1
header("Pragma: no-cache"); //HTTP 1.0
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

或者通过向 url 添加动态控制的参数，以便脚本 url 不同（可能不是最好的主意，因为浏览器缓存会尝试缓存每个版本......但当你无法将其设为 php 或控制标头时，它会很有用）：

<script src="myNotCachableJS.js?s=<?php echo rand(1000,100000); ?>"></script>

【讨论】：

myDynamicJS.php 即使没有这些标头也不会被缓存。我希望 myPage.html 被缓存。

【解决方案2】：

Php 永远不会被缓存，因为它是在服务器端运行的。缓存（或者更确切地说，告诉浏览器进行缓存）的最佳方式是通过.htaccess（或http.conf，如果您有权访问）：

<IfModule mod_expires.c>
    ExpiresActive on

    ExpiresByType text/html               "access plus 1 month"
    ExpiresByType application/javascript  "access plus 1 month"
</IfModule>

您可以将其更改为“访问权限加 1 年”或您喜欢的任何时间范围。

希望这能让你开始。

【讨论】：

谢谢 Tobi，让我玩一下 http.conf。但是，我很确定浏览器可以缓存 PHP（或者至少是生成的 HTML/XML/浏览器接收到的任何内容）。通常，问题是阻止它这样做。
没错，发送到浏览器的结果就是缓存的结果。 HTML、XML、JSON 等。顺便说一句，不缓存设置“访问加 0 秒”。我认为html5boilerplate 有一个非常好的 .htaccess 示例，用于缓存、设置正确的 MIME 类型等。

【解决方案3】：

您可以使用FilesMatch 指令仅将缓存头添加到以您选择的扩展名结尾的文件中：

<FilesMatch "\.(html|js)$">
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
</FilesMatch>

理论上，这应该排除您的动态 JS，因为它将具有 PHP 扩展名，但包含其他两个文件。

【讨论】：