javascript - new Image().src="same url" coding twice but the browser just can catch one request - Stack Overfl

admin管理员组

文章数量:1417413

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?

<script>
     new Image().src="//stackoverflow/"
     new Image().src="//stackoverflow/"
</script>

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?

<script>
     new Image().src="//stackoverflow./"
     new Image().src="//stackoverflow./"
</script>

• javascript
• google-chrome
• httprequest

Share Improve this question Follow edited Feb 4, 2018 at 19:45 Salman Arshad 273k8484 gold badges444444 silver badges534534 bronze badges asked Aug 16, 2017 at 9:48 sinbarsinbar 1,07322 gold badges99 silver badges2626 bronze badges 2

• 1 This is not a 304 answer. Chrome displays 304 requests. i think that chrome caches the first request and the second is a cache hit. – wartoshika Commented Aug 16, 2017 at 9:51
• If you want to encourage multiple requests, add different GET parameters to the URL – Paul S. Commented Aug 16, 2017 at 10:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The browser has already downloaded the image, why would it make another request for the same image? If an image is used more than once on a page (which happens regularly), making an individual request for each instance it's used would produce a ton of unnecessary overhead. Two images with the same URL within the same page are assumed to be the same image.

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 Accept and Origin headers), 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.

HTML5 > Common infrastructure > Fetching resources > Processing model

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:

• HTML5 > Common infrastructure > Fetching resources > CORS-enabled fetch
• HTML5 > Embedded content > The img element > update the image data

本文标签：