Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)

enter image description here

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.

enter image description here

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

enter image description here

like image 881
forestclown Avatar asked Feb 23 '16 11:02

forestclown


People also ask

Can I use the same script twice?

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.

Does it matter if script is in head or body?

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.

Should scripts go head?

Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.


1 Answers

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

like image 176
Zamrony P. Juhara Avatar answered Nov 14 '22 17:11

Zamrony P. Juhara