-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage-b.html
132 lines (118 loc) · 6.03 KB
/
page-b.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>Page B</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/init-b.js"></script>
</head>
<body>
<div class="app">
<div class="app-title">applicationHost</div>
<div class="page">
<div id="applicationHost"></div>
</div>
</div>
<div class="lazie">
<div class="page">
<div class="primary">
<h1><a href="page-b.html">Page B</a></h1>
<p>
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.  ==>
</p>
<h2>1.  Load <a href="js/init-b.js">init-b.js</a></h2>
<p>
<a href="js/init-b.js">init-b.js</a> is hard-coded in the page's <code><head></code> section. This is the only hard-coded <code><script></code> element in this document; the other scripts are dynamically appended to the <code><head></code>.
</p>
<pre>
<code>
<head>
<meta charset="utf-8" />
<title>Page B</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<span class="highlight"><script type="text/javascript" src="js/init-b.js"></script></span>
</head>
</code>
</pre>
<h2>2.  Execute <a href="js/init-b.js">init-b.js</a></h2>
<p>
<a href="js/init-b.js">init-b.js</a> has two main sections of code:
</p>
<ol>
<li>an immediately-invoked function expression (IIFE), and</li>
<li>a function definition for <code>lazyFunction()</code>, which is attached to the <code>window.load</code> event.</li>
</ol>
<h3>2.1.  Execute IIFE</h3>
<p>
Neither dependencies ( <code>require.deps</code> ) nor a callback function ( <code>require.callback</code> ) are defined in the <code>require</code> global object's configuration. It does, however, define a shim configuration for <a href="lib/sammy/sammy.debug.js">sammy.js</a>.
</p>
<pre>
<code>
(function() {
require = {
// ...
// callback: undefined
// deps: undefined
shim: {
'sammy': {
deps: ['jquery'],
exports: 'Sammy'
}
}
};
}());
</code>
</pre>
<h3>2.2.  Define <code>lazyFunction()</code> & Attach to <code>window.load</code></h3>
<p>
<a href="lib/require/require.debug.js">require.js</a> is dynamically loaded by <code>lazyFunction()</code> after the <code>window.load</code> event. The <code>data-main</code> attribute is set to <a href="app/main-b.js">main-b.js</a>, which tells <a href="lib/require/require.debug.js">require.js</a> to load it next (i.e., as soon as <a href="lib/require/require.debug.js">require.js</a> is done loading).
</p>
<pre>
<code>
var lazyFunction = function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'lib/require/require.js';
<span class="highlight">s.setAttribute('data-main', 'app/main-b');</span>
document.getElementsByTagName('head')[0].appendChild(s);
}
window.onload = function() {
lazyFunction();
}
</code>
</pre>
<h2>3.  Load & Execute <a href="lib/require/require.debug.js">require.js</a></h2>
<h2>4.  Load <a href="app/main-b.js">main-b.js</a> and Begin App</h2>
</div>
<div class="secondary">
<h2><a href="http://www.webpagetest.org/">WebPagetest.org</a> Results</h2>
<ul>
<li><a href="http://www.webpagetest.org/result/130413_SX_PQD/">IE6</a></li>
<li><a href="http://www.webpagetest.org/result/130413_WJ_PQG/">IE7</a></li>
<li><a href="http://www.webpagetest.org/result/130413_VR_PQS/">IE8</a></li>
<li><a href="http://www.webpagetest.org/result/130413_SQ_PR4/">IE9</a></li>
<li><a href="http://www.webpagetest.org/result/130413_5A_PRD/">IE10</a></li>
<li><a href="http://www.webpagetest.org/result/130413_F5_PX7/">Firefox</a></li>
<li><a href="http://www.webpagetest.org/result/130413_HC_PXT/">Chrome</a></li>
<li><a href="http://www.webpagetest.org/result/130413_W4_PYD/">Safari (Windows)</a></li>
<li><a href="http://www.webpagetest.org/result/130413_5J_PYV/">iOS 5.1 (iPhone 4)</a></li>
<li><a href="http://www.webpagetest.org/result/130413_9H_Q2Q/">IE6 + Chrome Frame</a></li>
<li><a href="http://www.webpagetest.org/result/130413_W5_Q34/">Android 2.1 (Nexus S)</a></li>
</ul>
<h2>Test Pages</h2>
<ul>
<li><a href="page-a.html">Page A</a></li>
<li><a href="page-b.html">Page B</a></li>
<li><a href="page-c.html">Page C</a></li>
<li><a href="page-d.html">Page D</a></li>
</ul>
<h2>Github Repo</h2>
<p>
Fork this demo on <a href="https://github.com/dslatten/lazie">github</a>.
</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>