A script element needs to be resolved immediately. If it's an inline script everything is fine, but if it is an external resource, it needs to be downloaded first.
While downloading, it is blocking the page rendering and possibly other downloads. That's why one should put script blocks at the end of the body tag to block as few other processes as possible.
Whether your 3 scripts are downloaded in parallel or one after another depends on the browser. Modern browser do several http requests at the same time and thus have better page rendering times. However, independent from which of the scripts has finished loading first, the order of execution is always fixed - the scripts get executed in the order they appear in your html markup (in your example: 1.js -> 2.js -> 3.js). So a very small .js
file which appears last in the source might be avaiable first, but has to wait with execution for all other sourcefiles to be downloaded and executed which appear before.
That's why they introduced async
- which basically tells the browser: "The order of execution doesn't matter, just download it and execute it when it's finished donwloading and you have some spare time."