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

browser, html, javascript, web

Solution

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

Problem

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:

Original source