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. ==>
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>
init-a.js has two main sections of code:
lazyFunction()
, which is attached to the window.load
event.
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
};
}());
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();
}