为何重新创建的img图片没有发起任何请求
最新回答
梦远了爱淡了
2022-05-11 12:07:04
重新创建的img图片没有发起任何请求，是因为浏览器缓存机制导致的。
- 浏览器缓存机制：当浏览器首次加载一个图片时，它会将该图片存储在内存（memory cache）或磁盘（disk cache）中。当后续再次请求相同的URL时，浏览器会首先检查缓存，如果缓存有效（即图片未过期且符合缓存策略），浏览器会直接从缓存中加载图片，而不会发起新的网络请求。
- 强缓存与协商缓存：
强缓存：如果缓存未过期，浏览器不会将请求发送到服务器，直接从缓存中读取资源。此时，在Network面板中虽然看不到新的请求，但可以看到缓存记录（如memory cache或disk cache）。
协商缓存：即使配置了协商缓存，如果浏览器认为缓存仍然有效（例如，通过Last-Modified或ETag判断），它可能仍然不会发起新的请求到服务器，而是直接从缓存中加载。这解释了为什么在Network面板中看不到任何请求记录。
- 图片地址不变：在你的场景中，头像的图片地址始终保持不变。因此，无论图片被移除并重新插入DOM多少次，只要缓存未过期，浏览器都会认为这是同一个资源，并直接从缓存中加载，而不会发起新的请求。
- 解决方案：
添加随机数或时间戳：虽然你提到不想这样做，但这是最直接的方法来确保每次请求都被视为新的请求，从而绕过缓存。
使用AJAX请求：如你所述，通过AJAX发起请求可以更好地控制缓存行为。你可以设置请求头来强制验证缓存（如Cache-Control: no-cache或Pragma: no-cache），这样即使图片地址不变，服务器也会被询问是否返回新资源。
服务端配置：确保Nginx或其他服务器的缓存配置正确，以便在资源更新时能够正确处理协商缓存请求。
- img标签的机制：img标签本身没有特殊的机制来阻止请求的发起。是否发起请求完全取决于浏览器的缓存策略和当前缓存状态。因此，要解决这个问题，需要从缓存策略入手。
热门标签
