In the web app I am currently debugging, the index page looks something like below.
<head>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel='stylesheet' href='u.css?1456217719620'></link>
<link rel='stylesheet' href='ll.css?1456217719620'></link>
<link rel='stylesheet' href='aa.css?1456217719620'></link>
<script src='c.js?NaN'></script>
<link rel="shortcut icon" href="/images/favicon.ico" />
<script src='ll1.js?1456217719620'></script>
<script src='ll2.js?1456217719620'></script>
<script src='ll3.js?1456217719620'></script>
<script src='ll4.js?1456217719620'></script>
<script src='ll5.js?1456217719620'></script>
<script src='ll6.js?1456217719620'></script>
<script src='aa.js?1456217719620'></script>
</head>
<body>
<!-- Edit: As suggested in one of the reply, could it be because there are scripts like this in body? -->
<script type="text/javascript">
(function() {
var u='//widget.uservoice.com/xxxxx.js';
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=!1; g.defer=!0; g.src=u; s.parentNode.insertBefore(g,s);
})();
UserVoice = window.UserVoice || [];
</script>
</body>
Some of the scripts appear twice from developer tools (Chrome, see image below)
Sometimes both are 200 instead of 304 for the second request.
Is this normal?
What could have causes it to sometimes appear twice and sometimes it only appear once?
[Edit 1] It is different from this question How "304 Not Modified" works? It doesn't always show 304, sometimes both are 200 response. And this could be related to how HTML and javascript is written, not off-topic as suggested by moderator.
Even nginx recorded the request twice
[23/Feb/2016:21:56:09 -0500] "GET /ll1.js?1456217719625 HTTP/1.1" 200 220276
[23/Feb/2016:21:56:09 -0500] "GET /ll1.js?1456217719625 HTTP/1.1" 200 220284
[Edit 2] I think it might has something to do with "Large" file request? because as seen in the image below, I tried to load several javascript files, and some of them are couple MB in size. I didn't do much in the javascript, most of the smaller files just contain "console.log()", the larger version is just "var xxx = ['Large Array'];"
It is possible to run the same script twice; however, it may require significant rewriting to allow that to work. The problem happens when there is a specific thing (maybe a property, maybe variable, maybe a command) that is unique in the script.
If your is not placed inside a function, or if your script writes page content, it should be placed in the body section. It is a good idea to place scripts at the bottom of the <body> element. This can improve page load, because script compilation can slow down the display.
Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
If your Javascript code modifies DOM and add new <script>
node then, browser will load new script pointed in src
attribute. So it is possible. However second request may be served from browser cache if web server said that it is not modified (code 304).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With