emile
Version:
no-thrills stand-alone CSS animation JavaScript framework
91 lines (84 loc) • 2.37 kB
HTML
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Qwery Benchmarks</title>
<style type="text/css">
body {
width: 700px;
margin: 0 auto;
font: 300 18px 'helvetica neue', helvetica, arial;
}
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
li {
font-size: 28px;
}
h1 {
font: 300 36px 'helvetica neue', helvetica, arial;
}
</style>
<script src="../vendor/nw.js"></script>
<script src="../vendor/sizzle.js"></script>
<script src="../src/qwery.js"></script>
<script type="text/javascript">
var Q = qwery.noConflict();
</script>
</head>
<body>
<h1>Selector Benchmarks</h1>
<ul>
<li>Qwery: <span id="qwery">0</span>ms</li>
<li>Sizzle: <span id="sizzle">0</span>ms</li>
<li>NW: <span id="nw">0</span>ms</li>
</ul>
<div foo="bar"></div>
<div class="a"></div>
<div id="boosh">
<div class="a b">
<div class="d e" test="fg" id="booshTest"></div>
<em test="f g"></em>
<span class="h i a"></span>
</div>
</div>
<div id="attr-test1" -data-attr></div>
<div id="attr-test2" -data-attr></div>
<div id="attr-test3" class="found you" -data-attr title="whatup duders"></div>
<script type="text/javascript">
var i = 0, j;
var start = +new Date;
var tests = ['div .a', 'div', 'div#attr-test3.found.you[title="whatup duders"]', '#boosh', '.a', 'div.a', '#boosh a'];
while (i < 1000) {
i++;
for (j = 0; j < tests.length; j++) {
Q(tests[j]);
}
}
var qweryTime = +new Date - start;
i = 0;
var start2 = +new Date;
while (i < 1000) {
i++;
for (j = 0; j < tests.length; j++) {
Sizzle(tests[j]);
}
}
var sizzleTime = +new Date - start2;
i = 0;
var start3 = +new Date;
while (i < 1000) {
i++;
for (j = 0; j < tests.length; j++) {
NW.Dom.select(tests[j]);
}
}
var nwTime = +new Date - start3;
Q('#qwery')[0].innerHTML = qweryTime;
Sizzle('#sizzle')[0].innerHTML = sizzleTime;
NW.Dom.select('#nw')[0].innerHTML = nwTime;
</script>
</body>
</html>