html - 当相同图像的多个实例嵌入到 HTML 中时，会加载一次图像吗？

Question

如果我在一个页面中多次使用同一张图片，每张图片会分别加载，占用带宽和流量，还是只加载一张，其余的嵌入代码会重用该图片？

例如，假设我这样做了:

<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
...
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>

和image.jpg是100kb。当浏览器加载此页面时，它会浪费(100Kb * # of img 标签)流量吗？还是只加载一个 image.jpg 并将其重新用于其余标签？

Answer 1

实现 5th version of HTML specification 的浏览器不管与缓存相关的 HTTP header 如何，都可以重用图像。可能只会发生单个网络请求。

规范定义图像键。

7.2 Let key be a tuple consisting of the resulting absolute URL, the img element's crossorigin attribute's mode, and, if that mode is not No CORS, the Document object's origin.

当浏览器下载第一个图像源时，它会使用键将其添加到可用图像列表中。

If the download was successful and the user agent was able to determine the image's width and height

1. Set the img element to the completely available state.
2. Add the image to the list of available images using the key key.

当浏览器看到另一个具有相同键的图像时，它会从可用图像列表中取出它。

7.3 If the list of available images contains an entry for key, then set the img element to the completely available state, update the presentation of the image appropriately, queue a task to fire a simple event named load at the img element, and abort these steps.

不过，浏览器可能会随时从可用图像列表中删除图像。

Each Document object must have a list of available images. Each image in this list is identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin. User agents may copy entries from one Document object's list of available images to another at any time (e.g. when the Document is created, user agents can add to it all the images that are loaded in other Documents), but must not change the keys of entries copied in this way when doing so. User agents may also remove images from such lists at any time (e.g. to save memory).

有关详细信息，请参阅 How does a list of available images used when parsing document with multiple img nodes with same src? GitHub 上的 HTML 标准存储库中的问题。