Are Modern browsers loading scripts parallel or sequentially?
I'm evaluating existing resources for script loading optimization, but I readed in some articles like this, refers to the older browsers block other downloads until this sequential script loading phase is completed. I check Modernizr(yepnope.js), headjs and ControlJs as candidates. But, is it necesary use this tools for parallel script loading in modern browsers?
Answer
I believe by default most browsers today will actually load the scripts in parallel; but the browser will not by default execute the scripts in parallel. For example, in the following code the scripts will be loaded in parallel. In the image we can see that Fast1.js and Fast2.js loads extremely fast, but based on the time in the browser console, Fast2.js executes 3 seconds after Fast1.js executes.
Also, something else to keep in mind is that the order of the files can make a difference. The Backbone.js file depends on the underscore.js file. If we changed the order of these files, where bacbone.js is before underscore.js, an error will be raised.
<html >
<head>
<title></title>
<script src="scripts/fast1.js" type="text/javascript"></script>
<script src="scripts/libs/jquery-1.8.3.js" type="text/javascript"></script>
<script src="scripts/libs/underscore.js" type="text/javascript"></script>
<script src="scripts/libs/backbone.js" type="text/javascript"></script>
<script src="scripts/fast2.js" type="text/javascript"></script>
</head>
<body>
Hello
<script type="text/javascript">
console.log("html: " + Date());
</script>
<img src="imgs/bImg.png" />
</body>
</html>
Here's the code for the JavaScript file Fast1.js and Fast2.js
console.log("Fast 1: " + Date())
For Script loading I use Require.js. It also provides the benefit of organizing your code into modules that are in individual files.
Here's an a blog post I create on Browser Script Loading: Browser Script Loading
Here are a few articles on Script loading: