<!DOCTYPE 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 16px 'helvetica neue', helvetica, arial; text-shadow: 0 2px 2px #CCC; } ul,li { list-style: none; margin: 0; padding: 0; } li { font-size: 16px; } h1, h2 { margin: 0; font-weight: normal; font-size: 30px; } h2 { font-size: 20px; } .result { background-color: lightGreen; margin-top: 15px; padding: 10px; border-radius: 10px; box-shadow: 0 0 5px #ccc; } .result div { padding: 7px; border-radius: 5px; background-color: #BDFCC9; } .win { color: rgb(0, 125, 0); font-weight: bold; } </style> <script src="../vendor/nw.js"></script> <script src="../vendor/sizzle.js"></script> <script src="../src/qwery.js"></script> <script type="text/javascript"> var qwerynew = qwery </script> <script src="../qwery.js"></script> <script type="text/javascript"> var qweryold = qwery </script> </head> <body> <h1>Selector Benchmarks</h1> <div id="results"></div> <div foo="bar"></div> <div class="a"></div> <div id="boosh"> <div class="a b"> <div class="d e" test="fg" id="booshTest"> <div class="a b"></div> </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"> <span></span> <em></em> </div> <script type="text/javascript"> var tests = [ { name: 'Mixed bag', tests: [ 'div .a' , 'div' , 'div#attr-test3.found.you[title="whatup duders"]' , '#boosh' , '.a' , 'div.a' , '#boosh .a' ]} , { name: 'Simple tags and classes', tests: [ 'div .a' , 'div' , '.a' , 'div.a' ]} , { name: 'Simple IDs', tests: [ '#boosh' , '#boosh .a' , 'div#boosh' , 'div#boosh .h' ]} , { name: 'Attributes', tests: [ 'div#attr-test3.found.you[title="whatup duders"]' , '[test]' , 'div[class="d e"]' , 'div[title="whatup duders"] span' ]} , { name: 'Groups', tests: [ 'div .a, div, #boosh, .a, div.a, #boosh a' , '[test], div[class="d e"], div[title="whatup duders"] span' , '#boosh .h, .a>.e>.b,#booshTest>.b' ]} , { name: 'Relationships', tests: [ '.b > .e .a' , 'div > .a > .e ~ span' ]} ] var libs = [ { fn: Sizzle, id: 'Sizzle' } , { fn: NW.Dom.select, id: 'NW' } , { fn: qwerynew, id: 'Qwery (new)' } , { fn: qweryold, id: 'Qwery (old)' } ] var libidx = 0, testidx = 0, iterations function calibrate() { var start = +new Date for (var i = 0; i < libs.length; i++) { var lstart = +new Date for (var j = 0; j < 50; j++) { for (var k = 0; k < tests[testidx].tests.length; k++) { libs[i].fn(tests[testidx].tests[k]); } } libs[i].times[testidx] = +new Date - lstart } iterations = Math.round(1 / (+new Date - start) * 50000) iterations = Math.min(10000, Math.max(10, iterations)) } function setup() { var r = document.createElement('div'), html r.setAttribute('id', 'result_' + testidx) r.className = 'result' html = '<div><h2>Benchmark: <i>' + tests[testidx].name + '</i> (' + iterations + ' iterations)</h2><ul>' for (var i = 0; i < libs.length; i++) { html += '<li>' + libs[i].id + ': <span id="result_' + testidx + '_' + i + '"></span></li>' } html += '</ul></div>' r.innerHTML = html document.getElementById('results').appendChild(r) } function upd(t, l, txt) { document.getElementById('result_' + t + '_' + l).innerHTML = txt } function win(t, l) { var el = document.getElementById('result_' + t + '_' + l).parentNode el.className = 'win' el.innerHTML = '» ' + el.innerHTML + ' «' } function markWinner() { var j, winner = -1 for (j = 0; j < libs.length; j++) { if (winner === -1 || libs[j].times[testidx] < libs[winner].times[testidx]) winner = j } win(testidx, winner) } function runner() { var i = 0, j, start = +new Date if (!testidx && !libidx) { for (j = 0; j < libs.length; j++) libs[j].times = [] } if (libidx === 0) { calibrate() setup() } while (i++ < iterations) { for (j = 0; j < tests[testidx].tests.length; j++) { var r = libs[libidx].fn(tests[testidx].tests[j]) if (!r || r.length == 0) { alert('something went wrong with ' + libs[libidx].id + ' on test ' + tests[testidx].tests[j]) i = iterations break } } } libs[libidx].times[testidx] += +new Date - start upd(testidx, libidx, libs[libidx].times[testidx] + ' ms') if (!libs[++libidx]) { markWinner() libidx = 0 testidx++ } if (tests[testidx]) setTimeout(runner, 0) } runner() </script> </body>
</html>