javascript - 请问 chrome 为什么会重复加载图片资源？

Question

如图所示，发现预加载图片后，重复调用图片的时候触发了重复的图片资源（ 确定图片资源路径是一致的 ）加载。

在手机端没有发现这样的情况，但是在 chrome 上很容易出现类似的情况，每次重复加载的图片资源不相同。

重复请求一两次后，便不会再重复请求。

请问是什么原因导致了这样的情况出现？

html 头部

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

stackoverflow 上相同问题：https://stackoverflow.com/que...

Answer 1

http请求是304，实际上这张图片是从浏览器缓存里面加载的

引用： 对 HTTP 304 的理解

最近和同事一起看Web的Cache问题，又进一步理解了 HTTP 中的 304 又有了一些了解。
304 的标准解释是：Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
如 果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件，例如：CSS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。但是对于动态页面，就是动态产生的页面，往往没有包含 Last Modified 信息，这样浏览器、网关等都不会做缓存，也就是在每次请求的时候都完成一个 200 的请求。
因此，对于动态页面做缓存加速，首先要在 Response 的 HTTP Header 中增加 Last Modified 定义，其次根据 Request 中的 If Modified Since 和被请求内容的更新时间来返回 200 或者 304 。虽然在返回 304 的时候已经做了一次数据库查询，但是可以避免接下来更多的数据库查询，并且没有返回页面内容而只是一个 HTTP Header，从而大大的降低带宽的消耗，对于用户的感觉也是提高。
当这些缓存有效的时候，通过 HttpWatch 查看一个请求会得到这样的结果：