元素是否缓存？答案

【问题标题】：Are elements cached or not?元素是否缓存？
【发布时间】：2009-05-29 04:17:59
【问题描述】：

当我通过 Privoxy 检查我的浏览器从一个站点下载的内容时，似乎构成页面的所有元素（CSS、JS、图标等）每次都重新下载，即。浏览器不会缓存它们（抱歉，新用途不允许包含 URL）：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <TITLE>My Site</TITLE>
    <meta name="keywords" lang="fr" content="whatever">
    <meta name="Description" lang="fr" content="whatever">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Category" content="Internet"> 
    <meta name="revisit-after" content="2 days">
    <meta name="author" content="webmaster@example.com">
    <meta name="identifier-URL" content="http://www.example.com">
    <meta name="robots" content="index, follow">
    <meta name="classification" content="Internet">
    <meta name="distribution" content="global">

    <meta name="geography" content="Paris">
    <meta name='language' content='fr'><meta http-equiv='content-language' content='fr'><meta name='rating' content='General'>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="alternate" type="application/rss+xml" title="My RSS" href="http://www.example.com/rss.php" />


    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" href="animated_favicon1.gif" type="image/gif">

    <link rel="stylesheet" href="miseenforme.css" type="text/css">
    <link rel="stylesheet" href="css/screen2009.css" type="text/css">
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="css/screen2009-ie6.css" type="text/css">
    <![endif]-->

    <style type="text/css">@import url(jscalendar-1.0/calendar-blue.css);</style>
    <script type="text/javascript" src="jscalendar-1.0/calendar.js"></script>

    <script type="text/javascript" src="jscalendar-1.0/lang/calendar-fr.js"></script>
    <script type="text/javascript" src="jscalendar-1.0/calendar-setup.js"></script>

    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
    <script type="text/javascript" src="jquery.autogrow.js"></script>
    <script type="text/javascript" src="fonctionsjs.js?maj=v1"></script>
</head>

事实上，我在这个 HTML 标头中没有看到任何与缓存相关的说明。

有人可以确认浏览器（IE、Firefox、Chrome）不会缓存任何内容，除非在 HTML 标头中被告知？

我们是否需要配置浏览器来强制它们缓存元素？

谢谢。

【问题讨论】：

我希望浏览器尊重 HTTP 标头，但在您的情况下未指定缓存行为，因此您应该检查这些浏览器（或者可能是 http 协议）的默认行为。跨度>
标题中的 "elements" 具有误导性，它意味着别的东西 - 建议您改成“resources”吧？
其他寻求帮助的人可能希望查看他在回复中发布的其他信息：stackoverflow.com/questions/921630/are-elements-cached-or-not/…

标签： html performance caching

【解决方案1】：

短版：不用换浏览器，发送正确的缓存相关HTTP header*信息。

长版：如果您没有明确告诉浏览器缓存什么以及如何缓存，您可以让浏览器自行选择。此类设置是可配置的，并且因用户和浏览器而异，但通常您可以期望浏览器积极缓存图像、js 和 css，而不是 html（这非常粗略，只是我的经验）。但是，依靠浏览器来解决问题对您来说是不合理的，如果您在乎的话，您需要明确地告诉它们，并且您还需要使用响应标头而不是元标记来执行此操作，因为元标记根本不被尊重。

长版本的短版本：缓存复杂。我建议你用谷歌搜索你选择的语言平台的教程。

* 不是html头标签的内容，HTTP头的内容

【讨论】：

【解决方案2】：

您确定它们没有被缓存吗？如果您的服务器没有为静态元素输出缓存控制标头，浏览器仍会针对每个元素向服务器发出 HTTP 请求（带有缓存文件的时间戳）。然后服务器应该以 304 状态响应，而不是修改。所以文件本身不会再次传输，但这个请求-响应可能正是您在 Privoxy 中看到的。

要保存请求，您必须配置服务器以设置缓存控制标头。但是，请注意，您服务器上的更改可能不会反映在客户端上，因此您需要在更改时重命名您的 css/静态文件，以确保所有客户端都使用最新版本。

【讨论】：

【解决方案3】：

我认为首先要检查的是 - 您的浏览器是否禁用了缓存？

AFAIK，浏览器会缓存大多数页面元素，除非服务器响应中的浏览器设置或 HTTP 标头禁用此缓存。

第二件事是在输出中插入与缓存相关的标头，以便专门指示浏览器缓存所有可用信息（在一段时间内）。

Here's an excellent tutorial 关于缓存的主题有助于消除对浏览器缓存工作原理的许多误解。

【讨论】：

【解决方案4】：

使用YSlow 找出应该采取哪些措施来提高页面加载性能。它还告诉您应该做些什么来最大化客户端缓存（即在浏览器中）。

【讨论】：

【解决方案5】：

缓存（没有服务器配置或其他明确说明）通常是许多项目的浏览器设置。如果您没有设置足够大的缓存，或者您禁用了缓存，或者您的浏览器不确定它是同一个文件，或者其他任何可能性，它会重新下载这些项目。

您可以设置一些服务器控件。如果您让我们知道您正在运行什么服务器，您可能会得到更好的答案...

最后，您可以查看http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html 和http://www.web-caching.com/mnot_tutorial/how.html 了解更多信息。

基于your reply（我猜那是你的新名字……）你想看看你的Apache设置。我从来没有使用过 Apache，所以我不知道从哪里开始......

您还想看看我和其他人链接到的一些文章。这不是一个简单的话题。 One article 已链接到几次。（提示提示）

我不是 PHP 程序员，对此我不是 100% 肯定，但我敢打赌 PHP 有办法覆盖服务器的缓存头设置。可能值得在这里或 php.net 研究。

【讨论】：