/
performance.html
91 lines (74 loc) · 2.63 KB
/
performance.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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Demo: Using postMessage to do setTimeout with a real zero timeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// BEGIN implementation of setZeroTimeout
// Only add setZeroTimeout to the window object, and hide everything
// else in a closure.
(function() {
var timeouts = [];
var messageName = "zero-timeout-message";
// Like setTimeout, but only takes a function argument. There's
// no time argument (always zero) and no arguments (you have to
// use a closure).
function setZeroTimeout(fn) {
timeouts.push(fn);
window.postMessage(messageName, "*");
}
function handleMessage(event) {
if (event.source == window && event.data == messageName) {
event.stopPropagation();
if (timeouts.length > 0) {
var fn = timeouts.shift();
fn();
}
}
}
window.addEventListener("message", handleMessage, true);
// Add the one thing we want added to the window object.
window.setZeroTimeout = setZeroTimeout;
})();
// END implementation of setZeroTimeout
// BEGIN demo that uses setZeroTimeout
function runtest() {
var output = document.getElementById("output");
var outputText = document.createTextNode("");
output.appendChild(outputText);
function printOutput(line) {
outputText.data += line + "\n";
}
var i = 0;
var startTime = Date.now();
function test1() {
if (++i == 100) {
var endTime = Date.now();
printOutput("100 iterations of setZeroTimeout took " +
(endTime - startTime) + " milliseconds.");
i = 0;
startTime = Date.now();
setTimeout(test2, 0);
} else {
setZeroTimeout(test1);
}
}
setZeroTimeout(test1);
function test2() {
if (++i == 100) {
var endTime = Date.now();
printOutput("100 iterations of setTimeout(0) took " +
(endTime - startTime) + " milliseconds.");
} else {
setTimeout(test2, 0);
}
}
}
// END demo that uses setZeroTimeout
</script>
</head>
<body onload="runtest()">
<h1>Demo: Using postMessage to do setTimeout with a real zero timeout</h1>
<pre id="output"></pre>
</body>
</html>