0

I have a Java Web Application, and I'm wondering if the javascript files are downloaded with the HTML-body, or if the html body is loaded first, then the browser request all the JavaScript files.

The reason for this question is that I want to know if importing files with jQuery.getScript() would result in poorer performance. I want to import all files using that JQuery function to avoid duplication of JavaScript-imports.

Tom Tanner
  • 9,244
  • 3
  • 33
  • 61
Rafael Teles
  • 2,708
  • 2
  • 16
  • 32

4 Answers4

1

The body of the html document is retrieved first. After it's been downloaded, the browser checks what resources need to be retrieved and gets those.

You can actually see this happen if you open Chrome Dev Console, go to network tab (make sure caching is disabled and logs preserved) and just refresh a page. Example of Body loading then scripts

That first green bar is the page loading and the second chunk are the scripts, a stylesheet, and some image resources

d0nut
  • 2,835
  • 1
  • 18
  • 23
  • I saw all the requests on Chrome Dev Console, but I wanted to de sure =). – Rafael Teles Aug 12 '15 at 12:47
  • @RafaelTeles never hurts to ask! Next time you ask a question, though, make sure to mention that you tried something to understand. People on this site generally like to see what you've tried before asking a question since it shows some effort on your part. Mentioning you've looked in the dev console, for example, is a good start. – d0nut Aug 12 '15 at 12:49
  • @RafaelTeles dont forget to accept an answer when you're done. – d0nut Aug 12 '15 at 12:52
  • Actually, the HTML document *starts* to download first, but the browser doesn't wait for it to load completely before beginning to parse it and load the scripts that it uses. – Guffa Aug 12 '15 at 13:09
  • @Guffa actually, that's wrong. You can even test it for yourself like I did in my answer. However, if you dont want to believe me, here's another answer http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page that supports my claim – d0nut Aug 12 '15 at 13:16
  • @iismathwizard: That answer only describes how *that specific page* was loaded *that specific time*, it doesn't describe how the process of loading a page is done. If the HTML document is small, it will be downloaded in a single package and complete before anything else starts to load, but if the document is large the browser will start loading other files before the document completes loading. You can for example look in the console while this page loads: http://demo.borland.com/testsite/stadyn_largepagewithimages.html – Guffa Aug 12 '15 at 13:23
0

The HTML document is downloaded first, and only when the browser has finished downloading the HTML document can it find out which scripts to fetch

That said, heavy scripts that don't influence the appearance of the HTML body directly should be loaded at the end of the body and not in the head, so that they do not block the rendering unless necessary

andrrs
  • 2,289
  • 3
  • 17
  • 25
  • The HTML document *starts* to download first, but the browser doesn't wait for the download to complete before it starts parsing it and download the scripts that it uses. – Guffa Aug 12 '15 at 13:12
  • @Guffa: I wasn't aware of this. Is that when the HTML file is huge a smart browser can start parsing some early chunks of data and detect resources to fetch? Can you link to a page where this behavior can be observed in the network tab of the console? – andrrs Aug 12 '15 at 13:16
  • Yes, here is a page that you can try: http://demo.borland.com/testsite/stadyn_largepagewithimages.html – Guffa Aug 12 '15 at 13:24
0

I'm wondering if the javascript are downloaded with the html body during a request

If it's part of that body then yes. If it's in a separate resource then no.

For example, suppose your HTML file has this:

<script type="text/javascript">
    $(function () {
        // some code here
    });
</script>

That code, being part of the HTML file, is included in the HTML resource. The web server doesn't differentiate between what kind of code is in the file, it just serves the response regardless of what's there.

On the other hand, if you have this:

<script type="text/javascript" src="someFile.js"></script>

In that case the code isn't in the same file. The HTML is just referencing a separate resource (someFile.js) which contains the code. In that case the browser would make a separate request for that resource. Resulting in two requests total.

David
  • 208,112
  • 36
  • 198
  • 279
  • Thanks for the reply. So using the jQuery.getScript() will have the same effect than a html javascript import () ? – Rafael Teles Aug 12 '15 at 12:49
  • @RafaelTeles: Correct. The description of that function on jQuery's website says, `"Load a JavaScript file from the server using a GET HTTP request"`. – David Aug 12 '15 at 12:50
  • 1
    The behaviour is not the same, as the `getScript` will load the scripts asynchronously. – Guffa Aug 12 '15 at 13:30
0

The HTML document is downloaded first, or at least it starts to download first. While it is parsed, any script includes that the browser finds are downloaded. That means that some scripts may finish loading before the document is completely loaded.

While the document is being downloaded, the browser parses it and displays as much as it can. When the parsing comes to a script include, the parsing stops and the browser will suspend it until the script has been loaded and executed, then the parsing continues. That means that

If you put a call to getScript instead of a script include, the behaviour will change. The method makes an asynchronous request, so the browser will continue parsing the rest of the page while the script loads.

This has some important effects:

  • The parsing of the page will be completed earlier.
  • Scripts will no longer run in a specific order, they run in the order that the loading completes.
  • If one script is depending on another, you have to check yourself that the first script has actually loaded before using it in the other script.

You can use a combination of script includes and getScript calls to get the best effect. You can use regular scripts includes for scripts that other scripts depend on, and getScript for scripts that are not affected by the effects of that method.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005