为什么浏览器针对同一资源发送多个请求？

Question

这是我网站上的page。

当诸如Firefox和Safari之类的浏览器加载此页面时，它们多次请求相同的文档。请参见下面的开发者工具截图。

对于上面指出的3行，浏览器请求和服务器响应完全相同，只是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: 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

对于第二和第三，请求标头完全相同（但与第一不同-请参见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所指出的，该问题是由于src="#"标签中的img属性引起的。

作为解决此问题的方法，我现在使用以下空白GIF图像填充src属性。

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