问题描述
我注意到一个奇怪的行为。 html 页面上有 4 个 img 标签，但网络面板中只有一个 http get 请求。
为什么会出现这种行为？ 我认为即使有 4 个相同的资源请求，至少会发送 4 个请求，并且在第一个请求完成后将从缓存中返回最后 3 个请求。
<html><head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>test</title>
</head>
<body>
<h1>for 4 Image only one http request was sent</h1>
<img src="lily.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="lily.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="lily.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="lily.jpg" alt="Girl in a jacket" width="500" height="600">
</body></html>解决方法
您只引用了一种外部资源，即“lily.jpg”。
您使用它 4 次的事实不会使浏览器重新下载相同的内容 4 次。