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

From Market Ruler Help
Jump to: navigation, search
m
 
(5 intermediate revisions by the same user not shown)
Line 26: Line 26:
  
 
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.)
 
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.)
 
The reasons for this are that
 
  
 
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.
 
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.
Line 75: Line 73:
  
 
== Browser Support for Script async attribute ==
 
== Browser Support for Script async attribute ==
Now, the bad news. As of April 5th, 2011, the only browsers which support the '''async''' attribute in '''script tags''' are:
 
  
* Chrome 9 or greater, any platform
+
Now, the good news. As of May 2018, the browsers which support the '''async''' attribute in '''script tags''' are:
* FireFox 3.6 or greater, any platform
+
 
 +
* 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:
 
The test used to test these is found here:
Line 88: Line 90:
 
It is '''not supported in''':
 
It is '''not supported in''':
  
* Internet Explorer (5, 6, 7, 8, or 9)
+
* Internet Explorer 9 or lower (all platforms)
* Safari (Mac OS X, iPhone, or iPad)
+
* Safari 4 or lower (all platforms)
* FireFox 2
+
* FireFox 12 or lower (all platforms)
* Netscape
+
* Opera 12 or lower (all platforms)
* Mozilla
 
* Opera (10)
 
* AOL
 
* Konqueror
 
* Camino
 
  
 
== Browser Support for Script defer attribute ==
 
== Browser Support for Script defer attribute ==
  
As of April 5th, 2011, the only browsers which support the '''defer''' attribute in '''script tags''' are:
+
As of May, 2018, browsers which support the '''defer''' attribute in '''script tags''' are:
  
* Internet Explorer (5, 6, 7, 8, or 9)
+
* Internet Explorer 8 or greater (Windows)
* Chrome 9 or greater, any platform
+
* Google Chrome 19 through 66 (all platforms)
* FireFox 3.6 or greater, any platform
+
* FireFox 3.5 or greater (all platforms)
 +
* Opera (all platforms)
  
 
The test used to test these is found here:
 
The test used to test these is found here:
Line 114: Line 112:
 
It is '''not supported in''':
 
It is '''not supported in''':
  
* Safari (Mac OS X, iPhone, or iPad)
+
* Internet Explorer 7 or lower (all platforms)
* FireFox 2
+
* Safari before 2011
* Netscape
+
 
* Mozilla
+
== See also ==
* Opera (10)
+
 
* AOL
+
* [[How do browsers load stylesheets?]]
* Konqueror
+
* [[DOM]]
* Camino
 
  
 
[[Category:FAQ]]
 
[[Category:FAQ]]
 
[[Category:ConversionRuler FAQ]]
 
[[Category:ConversionRuler FAQ]]
 +
[[Category:Require Frequent Updates]]

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:

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.

It is not supported in:

  • Internet Explorer 7 or lower (all platforms)
  • Safari before 2011

See also