Menu
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?
554
In order to assess the consequences of any such decision, it helps to understand how browsers work: When the browser processes an HTML document, it does so from top to bottom. Upon encountering a <script> tag, it halts (“blocks”) further processing[2] in order to download the referenced script file.
Script tags are executed in the order they appear It also means scripts which appear later on the page can depend on things scripts which appear earlier have done. Elements on the page won't render until all the script tags preceding them have loaded and executed.
If I'm understanding your question I think you're asking if it matters where in a file a function/method is defined, and the answer is no, you can define them anywhere in a single source file. The JavaScript parser will read in all symbols before trying to run the code.
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:
70
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
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
