Is it normal if a script is downloaded twice when viewing from developer tools

Question

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'];"

Possible duplicate of [How "304 Not Modified" works?](http://stackoverflow.com/questions/20978189/how-304-not-modified-works) — StudioTime, Feb 23 '16 at 11:56
@DarrenSweeney I don't think that question covers why the script seems to be loading twice (cached or not) — Jaromanda X, Feb 23 '16 at 11:58
I think this can be helpful http://stackoverflow.com/questions/1046966/whats-the-difference-between-cache-control-max-age-0-and-no-cache — Taj Ahmed, Feb 23 '16 at 11:59
Do you have a screenshot of script loading as 200 twice? I've never seen that but would be interested to — StudioTime, Feb 23 '16 at 11:59
Can u remove the scripts in the body ad try again.. it should be some script making them to load twice. — Jayantha Lal Sirisena, Feb 24 '16 at 03:12
This is the hard part, without modifying anything, sometimes it won't load twice, sometimes it will. So by removing the scripts, is hard to determine if that solves it, as it might still reappear in the next couple of days. This is also what I have been doing — forestclown, Feb 24 '16 at 03:14
It could be a chrome issue as suggested, as I haven't able to see the same issue with my test html and js — forestclown, Feb 25 '16 at 02:28

score 2 · Answer 1 · answered Feb 23 '16 at 12:03

2

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).

answered Feb 23 '16 at 12:03

Zamrony P. Juhara

5,222
2
24
40

Probably this is not the reason (Check out my latest edit in question). The latest HTML example is fairly simple, probably has something to do with large file request? – forestclown Feb 24 '16 at 09:26
HTML is fairly simple, yes. But I cannot say the same for javascript. I don't even know what code in there or what they do. Duplicate request seems only happened for smaller javascript file not large one. – Zamrony P. Juhara Feb 24 '16 at 09:28
in the smaller files I just execute "console.log('')", in the larger file I just execute "var someVar = ['Large Array'];" – forestclown Feb 24 '16 at 09:29
Large Array is just some huge array with random string to keep the file large. – forestclown Feb 24 '16 at 09:30
Also duplicate requests happens to smaller files - yes, but only if large files are thrown into the mix – forestclown Feb 24 '16 at 09:32
http://stackoverflow.com/questions/10406908/chrome-browser-developer-tools-scripts-show-up-multiple-times may have something in common. Discussion there mentioned about a bug issue in Chrome developer tools https://bugs.chromium.org/p/chromium/issues/detail?id=113490 and also https://groups.google.com/forum/#!topic/google-chrome-developer-tools/lXOORMJ4R88 – Zamrony P. Juhara Feb 24 '16 at 09:42
I hope it is a chrome issue too, but sorry to say that similar behaviour in FF as well.. – forestclown Feb 24 '16 at 09:46
Ignore my previous remark about FF, I have yet to test my latest test HTML with FF – forestclown Feb 24 '16 at 09:58

score 2 · Answer 2 · answered Feb 13 '19 at 05:51

tl;dr Try right clicking Tag Assistant extension icon > Options > tick "Ignore External Scripts".

Possible answer is that you are running Tag Assistant (by Google) extension. My experience today is that I'm adding a third party SEO <script> tag to our site by pasting their javascript snippet into our site, which does a fairly normal dynamic <script> tag creation and insertion into the head of the page (actually it inserts it before the first script tag found on the page, which may not be in the head, but never mind). I found that the script name appeared twice, one after the other, in the network pane.

I created an XHR breakpoint for the script name, and found it stopped in the tag_assistant_compiled.js file within the Tag Assistant extension, as it made a very deliberate XHR request to load the external script file. Looking up the stack trace showed it was acting on purpose but I couldn't really see why it needed to make the request. Checking the options for the extension I found the similarly named "Ignore external scripts" checkbox, and sure enough, ticking that and refreshing the page meant no second request was made for the script.

Is it normal if a script is downloaded twice when viewing from developer tools

2 Answers2