302 image redirects slower in browsers

Question

I am on a WAMP stack and have the below one line of code for demo.html

<img src="http://localhost/redirect/demo.php"></img>

demo.php code as below

<?php
header("Location: http://localhost/redirect/blah");
exit();
?>

The code works fine. but there is huge response time during content download

when I change demo.html to use script tag vs img tag, there are no problems during response times

<script src="http://localhost/redirect/demo.php"></script>

Not sure why this is happening to IMG tags. Could anyone explain why this is happening and how do I avoid this? Are there any alternate methods to loading IMG via 302 without a javascript solution.

Note - believe this cannot be a PHP/WAMP problem as the response times are not affected when I call http://localhost/redirect/demo.php directly. Trust this has something to do with browser, its rendering, its load events.

Answer 1

If I'm not wrong, scripts are loaded synchronously whereas images are queued and loaded asynchronously.

So my understanding is if you use script tag, browsers wait to load http://localhost/redirect/demo.php which sends 302. This forces browser to execute http://localhost/redirect/blah before loading anything else.

Instead if you use img tag, browsers execute http://localhost/redirect/demo.php and continue to load remaining portion of the page. When demo.php returns 302, http://localhost/redirect/blah gets added to the queue of URLs to be loaded. Because of which the overall time to load the image is more.

Not sure if you can avoid it. Probably, enabling caching on demo.php could help in subsequent requests.