为什么有些 CSS、JS 和图像文件会从磁盘缓存加载，而其他的不会呢？

Question

为什么有些 CSS、JS 和图像文件会从磁盘缓存加载，而其他的不会呢？

9

我正在运行启用了缓存插件的WP网站。网站运行缓慢，因此我决定检查哪个元素需要更多时间来加载。直接打开F12（Chrome Web工具），然后进入Network选项卡。我看到的是一些文件从磁盘缓存中加载，而另一些则没有。请参见附图（列“大小”）。

如果你知道答案，请分享一下。

谢谢！

- Tzvetan Jordanov

首先，浏览器可以明确地“指示”缓存某些资源与其他资源不同... - 04FS

你现在使用哪个插件？可能需要改进设置。 - Simone Rossaini

1

磁盘/内存缓存不会导致减速。你的304可能会。虽然304意味着未修改，但客户端仍需执行HEAD请求以查找。仅在您的屏幕截图中就有12个304请求发送到服务器，如果没有使用HTTP2/SPDY，则这是浪费时间，即使使用HTTP2，也会浪费时间。看起来似乎是所有CSS都在做这个请求，请检查这些文件的过期标头，并可能增加其有效期。 - Keith

我正在使用缓存插件Speed of light，该插件管理过期标头。顺便说一下，我测试了许多缓存插件，它们都以相同的方式工作... - Tzvetan Jordanov

3个回答

2

似乎所有资源都是从缓存中加载的。区别在于，一些资源是从磁盘缓存读取的，一些资源是从内存缓存读取的，其余资源来自304。

ETag和cache-control决定是否应该从本地磁盘/内存缓存中读取资源或需要刷新(304)。如果资源过期，则Chrome会向服务器发送请求，以检查文件是否需要更新。 304请求的大小仅为请求实体的大小，而不是源文件的大小。

如果资源未过期，则Chrome将尝试从内存/磁盘缓存中读取，而不会向服务器端发送任何请求。

目前尚不清楚Web浏览器如何决定缓存类型。根据某些文档，我们只注意到Chrome更喜欢将CSS文件保存到磁盘缓存中，并将img/font/js文件保存到内存缓存中。

- Jokies Ding

1

我们在哪里设置ETag和缓存控制呢？内存缓存是一个简单的话题，但磁盘缓存则比较复杂。即使是同一产品，在不同的安装环境和浏览器中也会有不同的行为。我认为部署环境（Tomcat）、防火墙、路由、SSL（远程部分问题）在确定是否使用磁盘缓存时也起着作用。在某些客户端上，我无法使用磁盘缓存，它总是获取新的副本，但对于其他客户端上相同的产品和浏览器，它会从磁盘中读取（在所有情况下资源都没有被修改）。所谓资源，指的是JavaScript文件。 - benchpresser

我们有一个巨大的捆绑包（js文件），不使用磁盘缓存会导致性能问题。我搜索了几天，为什么有些客户永远不使用磁盘缓存？ - benchpresser

0

有时浏览器的HTTP缓存也与CORS策略有关。

例如：如果您的index.html部署了HTTP响应头Cross-Origin-Embedder-Policy: credentialless，并从跨域域加载JS、CSS或其他静态文件将不会命中磁盘缓存或内存缓存。

这是Chrome的已知问题：https://github.com/whatwg/fetch/issues/1253。

解决方案

在您的script标签中添加crossorigin="anonymous"，例如： <script type="text/javascript" src="https://your.com/a.js" crossorigin="anonymous"></script>

- Junior Tour

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amaresh S M · Accepted Answer

内存缓存-从随机访问存储器(RAM)中存储和加载资源。它很快，因为从RAM中加载资源很容易。这些资源将一直保留，直到您关闭浏览器或手动清除它。

磁盘缓存-它从磁盘中存储和加载资源，并且是持久的。它不会通过网络与Web服务器联系以获取数据。磁盘缓存通常作为硬盘的一部分。

我猜测浏览器会根据资源类型或使用频率来决定缓存存储类型。

有时我们使用其他站点(第三方)的资产或资源，这些内容将通过网络传输，并且这些内容的大小将以字节(B)表示。