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?
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?
Share Improve this question asked Aug 25, 2012 at 13:25 smorenosmoreno 3,5303 gold badges36 silver badges50 bronze badges 2- sequentially, if not doing anything extra for loading JavaScript files... – Krishna Kumar Commented Aug 25, 2012 at 14:02
- Hooking stackoverflow.com/q/1795438/632951 – Pacerier Commented Aug 12, 2017 at 8:18
2 Answers
Reset to default 22I 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:
- Script Loading
- Browser script loading roundup
Most browsers load them sequentially. However there is the async attribute you can put on a script tag to cause it to load differently.
MDN explains what a script tag does very well.
https://developer.mozilla.org/en-US/docs/HTML/Element/Script