In this post I will discuss how scripts are loaded and executed by the browser.
It’s common to have scripts loaded by the browser by using the script tag (<script>) with a src (source) attribute. In the old days, the early versions of IE, FireFox, and Chrome, the script tags would load and execute synchronously. Today newer browsers support the ability to download scripts in parallel. The scripts are still executed in order they are declared.
Here’s a list of browser support for asynchronous downloading of scripts:
The previous image is from BrowserScope: http://www.browserscope.org/?category=network&v=2&ua=Chrome%204,Firefox%203.0,Firefox%203.5,Firefox%203.6,IE%206,IE%208,Opera%2010.10,Safari%203.2,Safari%204.0
In the following example we will load 6 scripts (note the script at the bottom). The order of the scripts does matter. Since backbone.js depends on underscore.js, underscore.js will be declared before backbone.js. Here’s the code that will be used to help us understand script loading.
<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
<div id="container-main"></div>
<script type="text/javascript">
console.log("html: " + Date());
var AView = Backbone.View.extend({
initialize: function() {
console.log("AView: " + Date());
this.render();
},
render: function() {
$("#container-main").html("Some text");
}
});
var aView = new AView();
<img src="imgs/bImg.png" />
<script src="scripts/fast3.js" type="text/javascript"></script>
</body>
</html>
Here an example of code that will be used for the JavaScript files fast1.js, fast2.js, and fast3.js.
console.log("Fast 1: " + Date());
Below is the result of the HTML in Google Chrome.
In the image above Google Chrome has 3 sections. The top section shows the rendered HTML. The middle section shows Google Chrome Developer Tools with the table “Network” select. The bottom section shows the Google Chrome console that includes the “console.logs” from the JavaScript code.
When you open this page in the browser you will notice that the content that is render takes some time to be displayed. The reason is that the scripts files must be loaded and executed before the remaining HTML is executed.
We can see that the scripts fast1.js, fast2.js, and fast3.js are loaded extremely fast. Since fast1.js is the first in the order of scripts, it can execute early. We can see that fast2.js execute 4 seconds after fast1.js is executed. The reason is that fast2.js must wait for jquery.js, underscore.js, and backbone.js to load and execute. We can also see that fast3.js load extremely fast, but was the last to execute.
In the “Network” tab, notice that backbone.js completes loading prior to underscore.js. But remember that backbone.js has a dependency on underscore.js. The files loaded in parallel, but backbone.js had to wait for underscore.js to execute first. After underscore.js execution completed then backbone.js could then be executed.
You should notice in the “Network” tab that all the external JavaScript files loaded in parallel. The image file “bImg.png” did not load in parallel.
The main point that I’m trying to convey is that the browser will load all scripts in parallel, but executed the scripts in the order that they are declared. This provides benefit in speeding up page loads.
Note:
Just so that you are aware, I’m using a bandwidth throttling tool on an IIS server. This allows me to simulate a slower connection speed to the server.
Underscore.js is a fairly small file, but to make underscore.js load slower than backbone.js, I added a some additional text to the Underscore.js file.
To get consistent results, I disabled the browser cache.
