Are JavaScript files downloaded with the HTML-body

Question

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.

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

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

Answer 2

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

Answer 3

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.

Answer 4

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.