Does dowloading of javascript block a browser from downloading other resources?

Question

I am reading "high performance web sites", and in Chap 6, the author writes about how downloading scripts blocks other downloads, hence, the best practice is to put all scripts at the end of document.

I loaded a random page in my Chrome, and from developer tools, I see several js downloading in parallel. What is happening here? Has the modern browsers evolved, and limitation is no longer there? Or did I miss something?

P.S. I still don't quite understand how a browser download/parse html/javascript/css when loading a page. Is there any good blog post/resource explaining the general principles?

+++++++EDIT++++++

Quote from the book:

Parallel downloading is actually disabled while a script is downloading, the browser won't start any other downloads, even on different hostnames. One reason for this behavior is that the script may use document.write to alter the page content, so the browser waits to make sure the page is laid out appropriately.

My Chrome devtools:

Answer 1

There are two separate reasons for rearranging the loading of resources; actual loading time and apparent loading time.

Placing the style sheet link early means that it will be loaded when the content of the page loads, so the browser will not keep from displaying the content as it loads. That makes the page appear to load faster, even if the total load time is still the same.

How scripts are loaded affect the actual loading time because browsers will only request a limited number of resources at a time from each host. If the browser is loading several scripts from your server, that may delay the loading of some of the images. Earlier browsers would have a limit of two resources at a time, and although recent versions may load more resources at a time, there is still a limit.

Also, eventhough scripts will be loaded in parallel, the parsing of a script is blocking. Even if the next script is already loaded, it won't be parsed until the previous script has completed.

Some reosurces:
YAHOO! Best Practices for Speeding Up Your Web Site
UX Movement: Why You Should Place Style Sheets Before Scripts
Google Developers: Properly including stylesheets and scripts

Edit:

What the book says is outdated, modern browsers have pre-loaders that allows loading of resources before the code that uses them is due to be parsed.

About pre-loaders:
How the Browser Pre-loader Makes Pages Load Faster

Answer 2

When building a site for performance minimizing downloads is always a consideration. Some javascripts are tiny and readily available, others may be large or suffer from lags or have other built in details that sometimes take them longer to download and can impede the download of other resources and hit performance very noticeably.

One reason to load the javascripts and jqueries at the end of a page is to assure all required resources are available prior to running the scripts. (some scripts will even break if sought resources are missing when they attempt to run) In some cases it can also allow other resources to load with less interference and allow a visitor to be reading or reviewing content while the javascript loads and runs in the background.

There are instances however where the script must be in the head, but if not, it is best at the bottom.

Answer 3

You can refer this page taligarsiel.

It always good practice to put the script file at the end of the page and put CSS in head. Browser first render your CSS in head for presentation of page once your page is display then your script will rendered by browsers.

Answer 4

Yes and no.

<script> tags do block.

There is also an ASYNC attribute for script tag.

There are a number of ways to add script asynchronously. Here is my favorite:

document.createElement('script');
script.src = url;
getElementsByTagName('head')[0].appendChild(script);