| 1 | <!doctype html>
|
| 2 | <head>
|
| 3 | <meta charset="utf-8">
|
| 4 | <title>Acorn benchmark</title>
|
| 5 | <script src="../acorn.js"></script>
|
| 6 | <script src="compare/esprima.js"></script>
|
| 7 | <script src="compare/uglifyjs2.js"></script>
|
| 8 | <script src="jquery-string.js"></script>
|
| 9 | <script src="codemirror-string.js"></script>
|
| 10 | <style>
|
| 11 | td { text-align: right; padding-right: 20px; }
|
| 12 | th { text-align: left; padding-right: 40px; }
|
| 13 | body { max-width: 50em; padding: 1em 2em; }
|
| 14 | h1 { font-size: 150%; }
|
| 15 | </style>
|
| 16 | </head>
|
| 17 |
|
| 18 | <h1>Acorn/Esprima/UglifyJS2 speed comparison</h1>
|
| 19 |
|
| 20 | <p>This will run each of the three parsers on the source code of
|
| 21 | jQuery 1.6.4 and CodeMirror 3.0b1 for two seconds, and show a table
|
| 22 | indicating the number of lines parsed per second. Note that UglifyJS
|
| 23 | always stores location data, and is thus not fairly compared by the
|
| 24 | benchmark <em>without</em> location data.<p>
|
| 25 |
|
| 26 | <p>Also note that having the developer tools open in Chrome, or
|
| 27 | Firebug in Firefox <em>heavily</em> influences the numbers you get. In
|
| 28 | Chrome, the effect even lingers (in the tab) after you close the
|
| 29 | developer tools. Load in a fresh tab to get (halfway) stable
|
| 30 | numbers.</p>
|
| 31 |
|
| 32 | <button onclick="run(false)">Compare <strong>without</strong> location data</button>
|
| 33 | <button onclick="run(true)">Compare <strong>with</strong> location data</button>
|
| 34 | <button onclick="run(false, true)">Run only Acorn</button>
|
| 35 | <span id="running"></span>
|
| 36 |
|
| 37 | <script>
|
| 38 | function runAcorn(code, locations) {
|
| 39 | acorn.parse(code, {locations: locations});
|
| 40 | }
|
| 41 | function runEsprima(code, locations) {
|
| 42 | esprima.parse(code, {loc: locations});
|
| 43 | }
|
| 44 | function runUglifyJS(code) {
|
| 45 | uglifyjs.parse(code);
|
| 46 | }
|
| 47 |
|
| 48 | var totalLines = codemirror30.split("\n").length + jquery164.split("\n").length;
|
| 49 |
|
| 50 | function benchmark(runner, locations) {
|
| 51 |
|
| 52 | runner(jquery164, locations);
|
| 53 | runner(codemirror30, locations);
|
| 54 | var t0 = +new Date, t1, lines = 0;
|
| 55 | for (;;) {
|
| 56 | runner(jquery164, locations);
|
| 57 | runner(codemirror30, locations);
|
| 58 | lines += totalLines;
|
| 59 | t1 = +new Date;
|
| 60 | if (t1 - t0 > 2000) break;
|
| 61 | }
|
| 62 | return lines / ((t1 - t0) / 1000);
|
| 63 | }
|
| 64 |
|
| 65 | function showOutput(values) {
|
| 66 | var html = "<hr><table>";
|
| 67 | for (var i = 0; i < values.length; ++i)
|
| 68 | html += "<tr><th>" + values[i].name + "</td><td>" + Math.round(values[i].score) + " lines per second</td><td>" +
|
| 69 | Math.round(values[i].score * 100 / values[0].score) + "%</td></tr>";
|
| 70 | document.body.appendChild(document.createElement("div")).innerHTML = html;
|
| 71 | }
|
| 72 |
|
| 73 | function run(locations, acornOnly) {
|
| 74 | var running = document.getElementById("running");
|
| 75 | running.innerHTML = "Running benchmark...";
|
| 76 | var data = [{name: "Acorn", runner: runAcorn},
|
| 77 | {name: "Esprima", runner: runEsprima},
|
| 78 | {name: "UglifyJS2", runner: runUglifyJS}];
|
| 79 | if (acornOnly) data.length = 1;
|
| 80 | var pos = 0;
|
| 81 | function next() {
|
| 82 | data[pos].score = benchmark(data[pos].runner, locations);
|
| 83 | if (++pos == data.length) {
|
| 84 | running.innerHTML = "";
|
| 85 | showOutput(data);
|
| 86 | } else setTimeout(next, 100);
|
| 87 | }
|
| 88 | setTimeout(next, 50);
|
| 89 | }
|
| 90 | </script>
|