When exactly are javascripts parsed and interpreted?

Question

Please feel free to close this question if it is a duplicate(I could not find a question which exactly answers this.)

Experts always recommend to place all your javascript files at the bottom of the body tag(or just before when it is necessary). This makes sure that the other elements of the page(like css, images, etc) are not blocked due to the javascript file.

My understanding is that a browser, opens some connections for downloading the resources. It downloads a javascript file in the same way as it downloads any other resource. Once it understands its a javascript file(by looking at the type), it starts a new thread(Parser) and gives this file to the thread for parsing and interpretation. And continues to download other files. If another script is encountered, it is queued on the created thread. Is my understanding correct? Or is it that the browser starts parsing on the same thread on which the script file was downloaded and so subsequent downloads on this thread are blocked until the parsing is complete?

What happens when the javascript files comes from the browser cache? Is the behaviour different?

I hope the answers are true for all the browsers(IE, Chrome, FF)

contents in the HEAD are downloaded first (all of it), and the BODY is not parsed until it is finished. The body is parsed top to bottom, and resources do not wait to be downloaded before they are loaded into the DOM (and scripts executed). I assume all modern browsers handle it this way, but without further testing / research it's hard to make that claim. — rlemon, Apr 18 '13 at 17:17
They're parsed/interpreted as soon as they're encountered in the HTML, from top to bottom. Unless the ` — Ian, Apr 18 '13 at 17:19

score 0 · Answer 1 · answered Apr 18 '13 at 17:20

The reasoning behind putting javascript in the footer is so that it does not interfere with the HTML data being created on the page. If you need to include a javascript file which contains functions, you could include that in the header without any issues, it's more the code that uses these functions that you need to worry about.

<head>
<script type="text/javascript>...</script>
<script type="text/javascript>...</script>
...
</head>

<body>
<p>some html here ... </p>
...

<script type="text/javascript">
Here goes your slow, time consuming script which may call the scripts above.
</script>
</body>

When exactly are javascripts parsed and interpreted?

1 Answers1