Difference between revisions of "How does JavaScript run on a web page?"

Latest revision as of 21:17, 22 May 2018

Most web pages contain more than just the HTML on the page itself; they contain many external resources, such as:

CSS Cascading Style Sheets
Images
Videos
JavaScript files

Aside from the amount of time it takes for your web server to deliver the HTML page itself, the time it takes for the page to fully load is heavily dependent on these external resources.

Retrieving Images and CSS

Most Web browsers load CSS files and Images in parallel, meaning if your web page looks like this:

<html>
<head><title>Example page</title>
<link rel="stylesheet" href="css0.css" media="all />
<link rel="stylesheet" href="css1.css" media="all />
<link rel="stylesheet" href="css2.css" media="all />
</head>
<body>
<p>Our style sheets affect how text is shown on this page</p>
<img src="image0.png" />
<img src="image1.png" />
<img src="image2.png" />
</body>
</html>

Then the browser will attempt to retrieve css0.css, css1.css, and css2.css at the same time. Similarly, image0.png, image1.png and image2.png will be loaded at the same time. (Three requests to the web server within the same time frame.)

Some browsers will limit the number of remote requests they make to a web server; so if you have a page which contains 200 images, the browser will only request (for example) 20 at a time. Once an image is loaded, it then requests another (until 20 are being requested simultaneously) until all 200 images have been loaded.

Retrieving JavaScript

When it comes to JavaScript, because it is a programming language and because JavaScript code that is loaded at the start of the page may affect code loaded later on the page, JavaScript is loaded serially, meaning one after another:

<html>
<head><title>Example page</title>
<script src="script0.js" type="text/javascript"></script>
<script src="script1.js" type="text/javascript"></script>
</head>
<body>
<p>Many scripts running on this page</p>
<script src="http://www.lethargic-server.com/script2.js" type="text/javascript"></script>
<script src="http://www.really-slow-server.com/script3.js" type="text/javascript"></script>
</body>
</html>

In the above example, script0.js is loaded and executed, then script1.js is loaded and executed, then script2.js, and finally script3.js.

The reasons for this are to avoid side-effects of one script affecting another script on the same page.

Recently, the W3C proposed a change in HTML5 which supports asynchronous script execution by adding two attributes to that script tag shown above:

async="async" - For asynchronous loading of scripts, meaning load it and run it whenever it has been completely loaded
defer="defer" - For deferred loading of scripts, meaning load it and run it after everything else has loaded

That is, I could simply write:

<script src="http://www.lethargic-service.com/script2.js" async="async" type="text/javascript"></script>

And if the lethargicserver.com web server takes 10 seconds to respond, your page is loaded correctly, with no delays to scripts down the page.

The difference between async and defer

Both the async and the defer attribute's presence in a script tag allow other scripts later on the page to execute immediately.

async in the script attribute means run the code for this script as soon as you possibly can.

defer essentially "postpones" execution of the script until the entire page has been loaded. (Technically, until the entire DOM is parsed.) defer scripts are also run serially, but after all other scripts on the page.

When both async and defer are present in a script tag, the following happens:

async takes precedence if it is supported, otherwise
defer is honored (if supported), and finally
the script is loaded normally (serially)

Browser Support for Script async attribute

Now, the good news. As of May 2018, the browsers which support the async attribute in script tags are:

Internet Explorer Edge, 11, 10 (Windows Operating System)
Google Chrome 19 through 66 (all platforms)
FireFox 13 or greater (all platforms)
Safari 5.1 or greater (Mac OS X)
Opera 48 or greater (all platforms)

The test used to test these is found here:

http://test.marketruler.com/js/async.php

The page contains a single asynchronous script which has a three second delay before loading. This flags browsers which support it relatively easily.

It is not supported in:

Internet Explorer 9 or lower (all platforms)
Safari 4 or lower (all platforms)
FireFox 12 or lower (all platforms)
Opera 12 or lower (all platforms)

Browser Support for Script defer attribute

As of May, 2018, browsers which support the defer attribute in script tags are:

Internet Explorer 8 or greater (Windows)
Google Chrome 19 through 66 (all platforms)
FireFox 3.5 or greater (all platforms)
Opera (all platforms)

The test used to test these is found here:

http://test.marketruler.com/js/defer.php

The page contains a single script which has a three second delay before loading.