☰

浏览器有时不从我的 Node 服务器请求图像

tag-icon • tag-icon browser webserver node.js
浏览器有时不从我的 Node 服务器请求图像

我正在运行一个 Node 服务器。我记录了服务器收到的每个请求。当我在浏览器中输入 URL 时，我看到了一些不稳定的行为。

有时所有文件都已加载，页面加载正常。其他时候，仅请求文本文件（.js，等），而我的服务器甚至从未请求.css媒体文件（.jpeg， ）。.png

什么原因会导致浏览器有时候请求媒体文件，有时候却忽略它们？

答案1

这不是问题，这是预期行为。现代浏览器在缓存图像方面非常积极。就 Chrome 而言，它会保留网页内容（图像和外部文件），直到缓存过期或被手动清除。

Chrome 中的内容缓存。

要查看此行为的实际效果，请在 Chrome 中加载页面并跟踪 Node 应用程序的日志。现在，在页面加载后，在 Chrome 中打开 Web 检查器（右键单击并点击“检查”），然后导航到“网络”选项卡。请参阅下面的屏幕截图以供参考。“网络”选项卡中的一个选项标记为“禁用缓存”。

如果您选中该框然后重新加载页面，日志现在应该会显示所有正在重新加载的页面元素。检查器中的此选项是 Web 开发人员的工具，用于缓存不但不能解决问题的情况。请注意，Safari 中也有类似的选项。

Chrome 中的网络检查器和“网络”选项卡，其中选中了“禁用缓存”选项。

Web 服务器缓存控制标头。

另一个选项是使用命令行选项查看 Web 服务器发送的标头curl -I。只需从您的网页获取图像（或元素）的 URL，然后通过curl -I命令行选项查看标头。

例如，假设您test.png在名为 的服务器上有一个名为 的图像example.com，您可以运行此命令来查看 Web 服务器在处理请求时发送的标头test.png：

curl -I http://example.com/test.png

或者 - 要查看一些真实的标头 - 让我们使用此方法检查访问 Google 徽标时发送的标头：

curl -I curl -I https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

我看到的返回标头是：

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Type: image/png
Content-Length: 13504
Date: Mon, 01 Jan 2018 02:59:24 GMT
Expires: Mon, 01 Jan 2018 02:59:24 GMT
Cache-Control: private, max-age=31536000
Last-Modified: Thu, 08 Dec 2016 01:00:57 GMT
X-Content-Type-Options: nosniff
Server: sffe
X-XSS-Protection: 1; mode=block
Alt-Svc: hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35"

请注意该Cache-Control标头及其max-age值为 31536000。您知道 31536000 代表什么吗？这是以秒为单位的数字，相当于 1 年。因此，Google 的服务器表示，我们的浏览器应该将该图像缓存 1 年，然后再检查新图像。

我猜你运行的任何 Node 应用程序也必须有某种类似的Cache-Control设置，如果你想要更频繁地加载内容，你应该降低该Cache-Control设置。但通常这只应该用于开发和测试目的；对于生产服务器来说，利用浏览器缓存是一件好事。而获得应用程序需求的正确平衡本身就是一门科学。

相关内容