Look at the following code. Chrome logs one request in debug console. If this is because of caching, why does it not log two requests with the last one being 304?
What explains this browser behavior?
You are requesting the same image twice. The behavior is actually described in HTML5 specifications. Quote:
If the resource is identified by an absolute URL, and the resource is to be obtained using an idempotent action (such as an HTTP GET or equivalent), and it is already being downloaded for other reasons (e.g. another invocation of this algorithm), and this request would be identical to the previous one (e.g. same
Originheaders), and the user agent is configured such that it is to reuse the data from the existing download instead of initiating a new one, then use the results of the existing download instead of starting a new one.
Basically it says that if you request the exact same resource multiple times, the browser downloads it only once (or not download it at all and serve from cache instead).
Relevant specs in reverse order: