为什么浏览器对页面 URL 发出多个请求？

Question

这是来自我网站的 page。

当 Firefox 和 Safari 等浏览器加载此页面时，它们会多次请求同一个文档。请参阅下面开发者工具的屏幕截图。

对于上面指出的 3 行，浏览器请求和服务器响应完全相同，只是 Accept header 略有不同。

对于第一个请求，请求header是：

Host: dwbi.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://dwbi.org/categories/11/dimensional-model
Cookie: xxxxx
Upgrade-Insecure-Requests: 1
Cache-Control: max-age=0

而对于2nd和3rd，请求header完全相同（但不同于1st - 参见 Accept):

Host: dwbi.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: image/webp,*/*
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://dwbi.org/pages/35/dimensional-modeling-approach-for-various-slowly-changing-dimensions
Cookie: xxxxx
Cache-Control: max-age=0

这些多个请求在后端被注册为 3 次不同的访问。为什么浏览器会发送这些多个请求，我该如何阻止它们？

Answer 1

这是因为您网站中的这一行：

<img id="modal-image" class="max-w-full w-full1" src="#" style="user-select: auto;">

源指向此页面，但请求要求的是图像类型的数据。

Answer 2

正如下面@AppleJam 所指出的，问题是由于 img 标签中的 src="#" 属性引起的。

作为此问题的解决方案，我现在使用空白 GIF 图片填充 src 属性，如下所示。

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

为什么浏览器对页面 URL 发出多个请求？

Why is the browser making multiple requests to the page URL?

http

firefox

http-headers

firefox-developer-tools

http-accept-encoding