Permalink
Fetching contributors…
Cannot retrieve contributors at this time
284 lines (269 sloc) 12.2 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is just a test document for Benchmark.js.">
<title>Benchmark.js test page | jsPerf</title>
<!-- https://jsperf.com/benchmark-js-test-page -->
<link rel="stylesheet" href="main.css">
<meta name="referrer" content="never">
<meta name="robots" content="noindex">
<script>document.documentElement.className = 'js'</script>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script><![endif]-->
</head>
<body>
<article>
<hgroup>
<h1>Benchmark.js test page</h1>
<h2>JavaScript performance comparison</h2>
</hgroup>
<p class="meta">
Test case created by <a href="https://mathiasbynens.be/">Mathias</a>
<time datetime="2010-08-02T18:45:23+02:00" pubdate>40 seconds ago</time>
and last updated <time datetime="2010-08-02T18:45:51+02:00">12 seconds ago</time>
</p>
<section>
<h2>Info</h2>
<p>
This is just a test document for Benchmark.js.
</p>
</section>
<section id="prep-code">
<h2>Preparation code</h2>
<pre><code><span
class="sc2">&lt;<span class="kw2">div</span>&gt;</span>Lorem ipsum<span
class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span><br><span
class="sc2">&lt;<span class="kw2">script</span>&gt;</span><br>&nbsp; <span
class="kw2">var</span> arr <span class="sy0">=</span> <span class="br0">&#91;</span><span
class="nu0">1</span><span class="sy0">,</span> <span class="nu0">5</span><span
class="sy0">,</span> <span class="nu0">4</span><span class="sy0">,</span> <span
class="nu0">2</span><span class="sy0">,</span> <span class="nu0">3</span><span
class="br0">&#93;</span><span class="sy0">;</span><br><br>&nbsp; <span
class="kw2">function</span> init<span class="br0">&#40;</span><span
class="br0">&#41;</span> <span class="br0">&#123;</span><br>&nbsp;&nbsp;&nbsp; window.<span
class="me1">console</span> <span class="sy0">&amp;&amp;</span> console.<span
class="me1">log</span><span class="br0">&#40;</span><span class="st0">'init called'</span><span
class="br0">&#41;</span><span class="sy0">;</span><br>&nbsp; <span
class="br0">&#125;</span><br><span class="sc2">&lt;<span class="sy0">/</span><span
class="kw2">script</span>&gt;</span><br><span class="sc2">&lt;<span
class="kw2">script</span>></span><br>Benchmark.<span class="me1">prototype</span>.<span
class="me1">setup</span> <span class="sy0">=</span> <span class="kw2">function</span><span
class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br>&nbsp; window.<span
class="me1">foo</span> <span class="sy0">=</span> <span class="nu0">42</span><span
class="sy0">;</span><br>&nbsp; <span class="kw2">var</span> x <span
class="sy0">=</span> arr<span class="sy0">;</span><br><span class="br0">}</span><span
class="sy0">;</span><br><br>Benchmark.<span class="me1">prototype</span>.<span
class="me1">teardown</span> <span class="sy0">=</span> <span class="kw2">function</span><span
class="br0">(</span><span class="br0">) </span><span class="br0">{</span><br>&nbsp; window.<span
class="me1">foo</span> <span class="sy0">=</span> <span class="nu0">24</span><span
class="sy0">;</span><br><span class="br0">}</span><span class="sy0">;</span><br><span
class="sc2">&lt;<span class="sy0">/</span><span class="kw2">script</span>></span></code></pre>
</section>
<section>
<h2>Preparation code output</h2>
<div class="user-output">
<div>Lorem ipsum</div>
</div>
</section>
<section id="runner">
<h2>Test runner</h2>
<p id="firebug">
<strong>Warning! For accurate results, please disable Firebug before running the tests. <a href="https://jsperf.com/faq#firebug-warning">(Why?)</a></strong>
</p>
<p id="status">
<noscript>
<strong>To run the tests, please <a href="http://enable-javascript.com/">enable JavaScript</a> and reload the page.</strong>
</noscript>
</p>
<div id="controls">
<button id="run" type="button"></button>
</div>
<table id="test-table">
<caption>Testing in <span id="user-agent"></span></caption>
<thead>
<tr>
<th colspan="2">Test</th>
<th title="Operations per second (higher is better)">Ops/sec</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="title-1">
<div>Normal</div>
</th>
<td class="code">
<pre><code>x.<span class="me1">sort</span><span class="br0">&#40;</span><span
class="kw2">function</span><span class="br0">&#40;</span>a<span
class="sy0">,</span> b<span class="br0">&#41;</span> <span
class="br0">&#123;</span><br>&nbsp; <span class="kw1">return</span> a <span
class="sy0">-</span> b<span class="sy0">;</span><br><span
class="br0">&#125;</span><span class="br0">&#41;</span><span
class="sy0">;</span></code></pre>
</td>
<td id="results-1" class="results"></td>
</tr>
<tr>
<th scope="row" id="title-2">
<div>Exit Early</div>
</th>
<td class="code">
<pre><code>x.<span class="me1">sort</span><span class="br0">&#40;</span><span
class="kw2">function</span><span class="br0">&#40;</span>a<span
class="sy0">,</span> b<span class="br0">&#41;</span> <span
class="br0">&#123;</span><br>&nbsp; <span class="kw1">return</span> a <span
class="sy0">-</span> b<span class="sy0">;</span><br><span
class="br0">&#125;</span><span class="br0">&#41;</span><span
class="sy0">;</span><br><span class="kw1">return</span><span
class="sy0">;</span></code></pre>
</td>
<td id="results-2" class="results"></td>
</tr>
<tr>
<th scope="row" id="title-3">
<div>Async</div>
</th>
<td class="code">
<pre><code><strong class="co1">// async test</strong><br>setTimeout<span
class="br0">&#40;</span><span class="kw2">function</span><span
class="br0">&#40;</span><span class="br0">&#41;</span> <span
class="br0">&#123;</span><br>&nbsp; deferred.<span
class="me1">resolve</span><span class="br0">&#40;</span><span
class="br0">&#41;</span><span class="sy0">;</span><br><span
class="br0">&#125;</span><span class="sy0">,</span> <span
class="nu0">10</span><span class="br0">&#41;</span><span
class="sy0">;</span></code></pre>
</td>
<td id="results-3" class="results"></td>
</tr>
<tr>
<th scope="row" id="title-4">
<div>Error</div>
</th>
<td class="code">
<pre><code>x.<span class="me1">foo</span><span class="br0">&#40;</span><span
class="br0">&#41;</span><span class="sy0">;</span> <span
class="co1">// unknown method</span></code></pre>
</td>
<td id="results-4" class="results"></td>
</tr>
<tr>
<th scope="row" id="title-5">
<div>Comments</div>
</th>
<td class="code">
<pre><code><span class="co1">// comments at start</span><br>x.<span
class="me1">reverse</span><span class="br0">&#40;</span><span
class="br0">&#41;</span>.<span class="me1">sort</span><span
class="br0">&#40;</span><span class="kw2">function</span><span
class="br0">&#40;</span>a<span class="sy0">,</span> b<span
class="br0">&#41;</span> <span class="br0">&#123;</span><br>&nbsp; <span
class="kw1">return</span> a <span class="sy0">-</span> b<span
class="sy0">;</span><br><span class="br0">&#125;</span><span
class="br0">&#41;</span><span class="sy0">;</span><br><span
class="co1">// comments at end</span></code></pre>
</td>
<td id="results-5" class="results"></td>
</tr>
</tbody>
</table>
<p>
You can <a href="#" rel="nofollow">edit these tests or add even more tests to this page</a>
by appending <code>/edit</code> to the URL.
</p>
</section>
<section>
<h2 id="results">Compare results of other browsers</h2>
<div id="bs-results"></div>
</section>
<section id="comments">
<h1>0 comments</h1>
<div id="comments-wrapper">
<form action="#comment-form" method="post" id="comment-form">
<fieldset>
<h2>Add a comment</h2>
<div>
<label for="author">Name <em title="This field is required">*</em></label>
<input type="text" name="author" id="author" required>
</div>
<div>
<label for="author-email">Email <em title="This field is required">*</em></label>
<label class="inline">
<input type="email" name="author-email" id="author-email" required> (only used for Gravatar)
</label>
</div>
<div>
<label for="author-url">URL </label>
<input type="url" name="author-url" id="author-url">
</div>
<div>
<label for="message">Message <em title="This field is required">*</em><span>Markdown syntax is allowed</span></label>
<textarea name="message" id="message" required></textarea>
</div>
<div class="buttons">
<input type="submit" class="submit" value="Add comment">
</div>
</fieldset>
</form>
</div>
</section>
</article>
<footer>
&copy; 2014 <a href="https://jsperf.com/">jsPerf.com</a>
&middot; <a href="https://jsperf.com/browse">Browse</a>
&middot; <a href="https://jsperf.com/popular">Popular tests</a>
&middot; <a href="https://jsperf.com/faq">FAQ</a>
&middot; <a href="https://jsperf.com/faq#donate">Donate</a>
&middot; <a href="http://twitter.com/jsperf" rel="nofollow">twitter: @jsperf</a>
&middot; <a href="https://benchmarkjs.com/">Benchmark.js</a>
&middot; by <a href="https://mathiasbynens.be/" title="Mathias Bynens, front-end web developer">@mathias</a>
</footer>
<script src="../../node_modules/lodash/lodash.js"></script>
<script src="../../node_modules/platform/platform.js"></script>
<script src="../../benchmark.js"></script>
<script src="ui.js"></script>
<script src="../../plugin/ui.browserscope.js"></script>
<script>
var arr = [1, 5, 4, 2, 3];
function init() {
window.console && console.log('init called');
}
</script>
<script>
ui.browserscope.key = 'agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICAiI2QCgw';
ui.browserscope.selector = '#bs-results';
ui.add('Normal', '\
x.sort(function(a, b) {\n\
return a - b;\n\
});'
)
.add('Exit Early', '\
x.sort(function(a, b) {\n\
return a - b;\n\
});\n\
return;'
)
.add('Async', {
'defer': true,
'fn': '\
setTimeout(function() {\n\
deferred.resolve();\n\
}, 10);'
})
.add('Error', '\
x.foo(); // unknown method'
)
.add('Comments', '\
// comments at start\n\
x.reverse().sort(function(a, b) {\n\
return a - b;\n\
});\n\
// comments at end'
);
Benchmark.prototype.setup = '\
window.foo = 42;\n\
var x = arr;';
Benchmark.prototype.teardown = '\
window.foo = 24;';
</script>
</body>
</html>