javascript - 如何确定从缓存中提供文件？

Question

我已将以下代码设置为Apache服务器（CentOS）中的虚拟主机配置，以确保用户一次仅下载这些大型静态资产。

值得注意的是，我有一个大型的（捆绑的，缩小的）javascript，css等。

<FilesMatch "\.(ico|pdf|flv|jpe?g|png|gif|js|css|swf|mp3|mp4|webm)$">
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
</FilesMatch>

问题是，我无法确定是否从缓存中获取它们。即使未选中“禁用缓存”复选框，如果我使用Chrome Dev Tools（在“网络”标签中）检查了它们的响应标头，我的确确实会看到在一年后设置了过期标头，但是，我还看到报告的大小为355kb，加载时间超过1秒！

有没有比我拥有更多Apache / Dev Tools经验的人知道这里发生了什么？我是否相信报告的时间或expires标头？如何确定从缓存正确提供了我的资产？

谢谢你的帮助

Answer 1

缓存有两个部分，它们常常会引起混淆：


将项目添加到缓存中，以便在缓存时间内使用它们而无需返回服务器即可使用它们。这完全可以节省网络请求，并且是缓存的主要好处（请参见why Page Weight Doesn't Matter but latency does）。
可以在缓存时间结束后从缓存中提供项目，如果在与服务器进行快速仔细检查后发现缓存版本仍然有效（它将返回304响应，说“您的缓存版本仍然有效-将其缓存为再一点”）。这对于较大的资产（图像，视频）很有用，但是对于较小的资产（html和css），网络请求仔细检查资产是否仍然有效的请求可能几乎需要重新下载文件的时间。因此，通过这种缓存可以获得较小的收益。


要在Chrome开放的开发人员工具中测试这两种情况，必须确保未在“网络”标签中选中“禁用缓存”。默认情况下，因为当开发人员工具打开时，您很可能正在开发并想查看最新版本。

然后，您需要知道有三种方法可以请求影响缓存的页面：


您浏览到页面。如果尚未在缓存中找到它，您将看到状态200和大小。如果您之前访问过，并且在缓存中具有有效的版本，那么您仍然会看到200，但是“（来自缓存）”将出现在“大小”列中。最后，如果在高速缓存中但已过期，那么在与服务器检查后，如果实际上仍然是最新版本，则可能会看到304。
您按F5或重新加载页面。这是用户明确要求再次检查内容的请求。因此，即使仍在缓存时间内，浏览器也会仔细检查，充其量您会得到304响应。在测试时很容易误解这一点。
Ctrl + F5。这基本上是说“删除缓存，然后重新开始”。即使在缓存中并且有效，项目也将再次下载，因此您应该只会获得200条响应，没有“（来自缓存）”并且没有304s。


我仔细检查了您的网站，可以看到css和jpegs已正确添加到缓存中并从缓存中投放。此外，按F5会显示304，符合预期。所以一切看起来都不错。

需要注意的其他事项：


浏览器和服务器如何通过两种方法之一来确定缓存的版本是否仍然有效，因此经常使用Etags。但是由于long standing bug in Apache，Etags和GZip导致Apache出现问题。在这里查看我的帖子：https://www.tunetheweb.com/performance/http-performance-headers/etag/。我会关闭ETags并在服务器上打开Gzip（不知道为什么要关闭gzip，但绝对值得打开）。
您的HTML页面没有被缓存。这通常是通过缓存清除技术来完成的，但是我认为这是一个错失的机会。在站点上浏览时，最好获得即时响应，而不是等待HTML重新下载，即使它使用的资产是从缓存中提供的。我对此有一个blog post on caching进行进一步讨论。
浏览器可以在某些情况下忽略高速缓存（例如，如果开发工具在禁用高速缓存的情况下打开，或者高速缓存已填满或关闭），那么您就不必依赖高速缓存，但是如果设置正确，它可以为您的用户和服务器提供帮助很多。
缓存比您想象的要小得多（再次参见why Page Weight Doesn't Matter but latency does链接）。因此，再次假设最坏的情况，并且它不在缓存中。
您在服务器上禁用了“保持活动”功能，这对性能造成了巨大影响。在此处查看waterfall graph here，以了解这对您造成的影响。每个资源请求（无论是初始请求还是检查高速缓存304请求）都需要建立新的连接（橙色）以及新的SSL协商（紫色），这些都占请求的大部分，如果没有这些响应，响应将相当大。快一点默认情况下，Keep-Alives在Apache中处于启用状态，因此您是否明确将其关闭？如果是这样，为什么呢？请参见my blog post to see where to check the Keep-Alive settings in Apache。


顺便说一句。很抱歉在上一节中链接到我自己的许多博客文章，如果这看起来像垃圾邮件，但是我对此非常感兴趣（因此我为什么在上面写博客），并尝试在此处回答问题并且仅包含了更多信息的链接。因此，希望这不会冒犯任何人。