applicationHost

Page A

The following content represents a basic overview of this page's script structure and [intended] execution flow. When a particular script is mentioned below, it is linked to the "debug" version, as a convenient reference, but the page actually uses the minified versions when available. For a better (more reliable?) explanation of this page's loading behavior, re-run the WebPagetest.org results.  ==>

1.  Load init-a.js

init-a.js is hard-coded in the page's <head> section. This is the only hard-coded <script> element in this document; the other scripts are dynamically appended to the <head>.


    <head>
        <meta charset="utf-8" />
        <title>Page A</title>
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/init-a.js"></script>
    </head>

2.  Execute init-a.js

init-a.js has two main sections of code:

  1. an immediately-invoked function expression (IIFE), and
  2. a function definition for lazyFunction(), which is attached to the window.load event.

2.1.  Execute IIFE

Dependencies $ and ko are defined in the IIFE in init-a.js, via the require global object's callback property (i.e., the callback function to invoke when require.js is loaded):


    (function() {

        require = {

            // ...

            callback: function() {
                require(['jquery', 'knockout', 'require'],
                function($, ko, require) {
                    require(['app/main-a']);
                })
            }

            // deps: undefined

        };

    }());

2.2.  Define lazyFunction() & Attach to window.load

require.js is dynamically loaded by lazyFunction() after the window.load event. The data-main attribute is omitted, because main-a.js is already referenced in the require object's callback configuration (defined in init-a.js's IIFE).


    var lazyFunction = function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'lib/require/require.js';
        document.getElementsByTagName('head')[0].appendChild(s);
    }

    window.onload = function() {
        lazyFunction();
    }

3.  Load & Execute require.js

4.  Load & Execute jquery.js and knockout.js

5.  Load main-a.js and Begin App

WebPagetest.org Results

Test Pages

Github Repo

Fork this demo on github.