<!doctype html>
<html lang="en">
<head>
<title>Async performance test</title>
<meta charset="UTF-8">
<style>
pre {
background-color: #eeeeee;
padding: 20px;
}
div.test {
margin: 20px;
padding: 10px;
border: solid black 1px;
}
</style>
</head>
<body>
<div class="test">
<h3>setTimeout (slow, takes about 10 sec)</h3>
<pre class="source">
function async(callback) {
setTimeout(callback, 0);
}
</pre>
<p>
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)">
</p>
</div>
<div class="test">
<h3>img.onerror (data:uri)</h3>
<pre class="source">
function async(callback) {
var img = new Image;
img.addEventListener('error', callback, false);
img.src = 'data:,foo';
}
</pre>
<p>
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)">
</p>
</div>
<div class="test">
<h3>script.onreadystatechange</h3>
<pre class="source">
function async(callback) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "javascript:";
script.onreadystatechange = function () {
document.body.removeChild(script);
callback();
}
document.body.appendChild(script);
}
</pre>
<p>
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)">
</p>
</div>
<div class="test">
<h3>script.onload (data:uri)</h3>
<pre class="source">
function async(callback) {
var script = document.createElement('script');
script.onload = function() {
document.body.removeChild(script);
callback();
}
script.src = 'data:text/javascript,';
document.body.appendChild(script);
}
</pre>
<p>
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)">
</p>
</div>
<div class="test">
<h3>xhr.onreadystatechange (data:text/plain,foo)</h3>
<pre class="source">
function async(callback) {
var xhr = new XMLHttpRequest;
xhr.open('GET','data:text/plain,foo',true);
xhr.onreadystatechange = function() {
xhr.onreadystatechange = null;
callback();
};
xhr.send(null);
}
</pre>
<p>
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)">
</p>
</div>
<div class="test">
<h3>self.postMessage</h3>
<pre class="source">
function async(callback) {
var n = ++async.count;
window.addEventListener('message',function(e){
if (e.data == n) {
window.removeEventListener('message', arguments.callee,false);
callback();
}
},false);
window.postMessage(n, location.protocol + "//" + location.host);
}
async.count = 0;
</pre>
<p>
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)">
</p>
</div>
<script>
function runtest(div) {
var pre = div.getElementsByTagName('pre')[0];
eval(pre.textContent || pre.innerText); // load async function
var p = div.getElementsByTagName('p')[0];
var t = new Date, n = 1000, i = 0, flag = true;
try {
test();
} catch (e) {}
setTimeout(function() {if (flag) p.innerHTML = 'failed'; flag = false}, 200);
function test() {
if (i++ < n) {
async(test);
if (flag && i == 2) {
p.innerHTML = 'running';
flag = false;
}
} else {
p.innerHTML = "Average delay was " + (new Date - t)/n + "ms, over " + n + " iterations.";
}
}
}
</script>
</body>
</html>
没有评论:
发表评论