Why is it good to put script tag in the end of body tag?

Question

There are two events related to web page initialization of browser.

• DOMContentReady(document object) : HTML document was parsed and DOM tree was constructed
• load(window object) : All element of HTML document were rendered(displayed)

In my understanding, browser can't start rendering page before DOM is ready(DOMContentReady is fired) and by default script tag blocks any other browser process until script file is downloaded and executed.

Then why is it good to put script tag in the end of body tag? In my opinion, browser will be blocked when it meets script tag in any position of the page, so DOMContentReady will not be fired until script tag is downloaded and executed. As a result, user can't see anything except white blank page until script is fully processed regardless of position of script tag.

Answer 1

Modern browsers work by downloading the page and working through the eleemnts and content as it arrives. When the browser encounters script elements it will work to download those in the order they appear, and it will avoid rendering further content until after those scripts are downloaded in case they need to be present first. This a blocking operation, unlike e.g. a reference to an image.

This means if your script elements are at the start of the body or in the heder, your browser needs to download those before any body content at all begins to show up. Your users might wait a while watching a blank screen wondering what's going on and wondering if anything's working at all. Web users tend to only wait a few seconds (about 10) before concluding a site won't load—justifiably since working sites tend to also load quickly, and the ones that take ages are usually unusable.

We resolve this situation using one (or both) of two tools:

• We put the script elements at the end of the body, after all of the page's contents. This means the entire page will display as soon as it's available, and then the scripts will download to make things work.
• As of HTML5, we can mark scripts as async: <script src="..." async></script>. This instructs the browser to download the script in the background while continuing to download and render the page, without waiting on the script to resolve before displaying stuff.

In my understanding, browser can't start rendering page before DOM is ready (...) As a result, user can't see anything except white blank page until script is fully processed regardless of position of script tag.

This isn't the case. Modern browsers will often display the content of even a partially-loaded page even while it's still being downloaded, in order to give users something to look at. It means if you're downloading a 10,000 word essay over a slow connection, you can at least get started on the first few paragraphs while the rest of the page loads.