This repository has been archived by the owner on Jun 1, 2021. It is now read-only.
/
demo.html
122 lines (113 loc) · 4.51 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<title>CollectCalls demo</title>
</head>
<body>
<h1>
<a href="https://github.com/joelpurra/collectcalls">CollectCalls</a> demo
</h1>
<p>
This page demonstrates, in a blunt way, how scripts can block load/execution/display
of other content/scripts/stylesheets/images on the page. There are two <code>alert()</code>
boxes shown - one blocking and one non-blocking. Both of them are initialized in
the middle of the page's contents, between the "first half" and the "second half".
Using CollectCalls, the <code>alert()</code> can be deferred until the rest of the
page and jQuery has been loaded.
</p>
<p>
In case you wonder why jQuery and CollectCalls are not loaded at the top of the
page, it is because it is <a href="http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS">
best practice to load scripts at the bottom of the page</a>, near <code></body></code>.
There are also other techniques/optimizations/combinations that make it hard to
predict exactly when a script has loaded and executed, but CollectCalls can help
manage all of them.
</p>
<h2>
Demo modes
</h2>
<ol>
<li><a href="demo.html">Reload and do not show any alert box.</a></li>
<li><a href="demo.html?show-alert=blocking">Reload and show blocking alert box without
CollectCalls.</a></li>
<li><a href="demo.html?show-alert=non-blocking">Reload and show non-blocking alert box
using CollectCalls.</a></li>
<li><a href="demo.html?show-alert=blocking&show-alert=non-blocking">Reload and show
both blocking and non-blocking alert box.</a></li>
</ol>
<h2>
First half of the page has loaded
</h2>
<p>
Some content <em>above</em> both inline script blocks. If you have chosen to see
the blocking <code>alert()</code>, you can see how this demonstrates that some scripts
are better to execute <em>after</em> the page/all scripts (or just the right scripts)
have loaded.
</p>
<!-- Code that is written to the HTML now, but needs to be executed later -->
<!-- This can be anywhere on the page, even after CollectCalls(...), and multiple times -->
<script>
//<![CDATA[
// DEMO CODE: Only run non-blocking CollectCalls queue "runWithJQuery" when asked to
if (document.location.toString().indexOf("show-alert=non-blocking") !== -1)
{
// Set up, or reuse, a queue built as an array object
var runWithJQuery = runWithJQuery || [];
runWithJQuery.push(function ()
{
// Do some heavy lifting with jQuery
var scriptCount = $("script").length;
// Then show alert box - it won't block the page load, since it's already done
var msg = "jQuery has loaded, the page is ready and the queue is invoked." + "\n\n"
+ "Found " + scriptCount + " script tags on the page, using jQuery " + $.fn.jquery + ".";
alert(msg);
});
}
//]]>
</script>
<!-- This is the counter example -->
<script>
//<![CDATA[
// DEMO CODE: Only run blocking inline code when asked to
// This is bad code, do not copy
if (document.location.toString().indexOf("show-alert=blocking") !== -1)
{
alert("This alert is an example of script tags blocking execution.\n\nHalf of the page is not visible yet, and jQuery cannot be accessed.");
}
//]]>
</script>
<h2>
Second half of the page has loaded
</h2>
<p>
Some content <em>below</em> both inline script blocks. If you have chosen to use
CollectCalls to show the non-blocking <code>alert()</code>, you can see that the
entire page has loaded before it is popping up - even though the inline script using
jQuery was defined <em>above</em> this paragraph.
</p>
<h2>
End of page
</h2>
<p>
The javascript libraries <a href="http://code.jquery.com/jquery-latest.js">jquery-latest.js</a>
and <a href="https://raw.github.com/joelpurra/collectcalls/master/src/collectcalls.joelpurra.js">
collectcalls.joelpurra.js</a> are loaded <em>below</em> this paragraph.
</p>
<!-- Load jQuery (and plugins) at the end of the page for efficiency -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Load collectcalls.joelpurra.js at any point before calling JoelPurra.CollectCalls(...) -->
<script src="https://raw.github.com/joelpurra/collectcalls/master/src/collectcalls.joelpurra.js"></script>
<script>
//<![CDATA[
// This code won't be executed until jQuery has been loaded.
$(function ()
{
// Wrap the queue with CollectCalls
runWithJQuery = new JoelPurra.CollectCalls(runWithJQuery);
// Invoke the entire queue in the order the functions were added
runWithJQuery.join();
});
//]]>
</script>
</body>
</html>