2013-09-19 00:15:35 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2017-05-16 21:16:51 +00:00
|
|
|
<title>Speedometer 2.0 Interactive Runner</title>
|
2014-01-07 23:22:22 +00:00
|
|
|
<script src="resources/benchmark-runner.js" defer></script>
|
|
|
|
|
<script src="resources/tests.js" defer></script>
|
|
|
|
|
<style>
|
|
|
|
|
iframe { border: 1px solid black; }
|
|
|
|
|
ol { list-style: none; margin: 0; padding: 0; }
|
|
|
|
|
ol ol { margin-left: 2em; list-position: outside; }
|
|
|
|
|
.running { text-decoration: underline; }
|
|
|
|
|
.ran { color: grey; }
|
2017-05-19 10:50:38 +00:00
|
|
|
nav { position: absolute; right: 10px; height: 600px; }
|
2017-05-19 09:43:40 +00:00
|
|
|
nav > ol { height: 100%; overflow-y: scroll; }
|
2014-01-07 23:22:22 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2013-09-19 00:15:35 +00:00
|
|
|
<script>
|
|
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
function formatTestName(suiteName, testName) {
|
|
|
|
|
return suiteName + (testName ? '/' + testName : '');
|
|
|
|
|
}
|
2013-09-19 00:15:35 +00:00
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
function createUIForSuites(suites, onstep, onrun) {
|
|
|
|
|
var control = document.createElement('nav');
|
2014-01-07 23:22:22 +00:00
|
|
|
var ol = document.createElement('ol');
|
|
|
|
|
var checkboxes = [];
|
|
|
|
|
for (var suiteIndex = 0; suiteIndex < suites.length; suiteIndex++) {
|
|
|
|
|
var suite = suites[suiteIndex];
|
|
|
|
|
var li = document.createElement('li');
|
|
|
|
|
var checkbox = document.createElement('input');
|
|
|
|
|
checkbox.id = suite.name;
|
|
|
|
|
checkbox.type = 'checkbox';
|
2014-05-09 06:01:06 +00:00
|
|
|
checkbox.checked = !suite.disabled;
|
2014-01-07 23:22:22 +00:00
|
|
|
checkbox.onchange = (function (suite, checkbox) { return function () { suite.disabled = !checkbox.checked; } })(suite, checkbox);
|
|
|
|
|
checkbox.onchange();
|
|
|
|
|
checkboxes.push(checkbox);
|
2013-09-19 00:15:35 +00:00
|
|
|
|
2014-01-07 23:22:22 +00:00
|
|
|
li.appendChild(checkbox);
|
|
|
|
|
var label = document.createElement('label');
|
2014-01-08 03:58:16 +00:00
|
|
|
label.appendChild(document.createTextNode(formatTestName(suite.name)));
|
2014-01-07 23:22:22 +00:00
|
|
|
li.appendChild(label);
|
|
|
|
|
label.htmlFor = checkbox.id;
|
2013-09-19 00:15:35 +00:00
|
|
|
|
2014-01-07 23:22:22 +00:00
|
|
|
var testList = document.createElement('ol');
|
|
|
|
|
for (var testIndex = 0; testIndex < suite.tests.length; testIndex++) {
|
|
|
|
|
var testItem = document.createElement('li');
|
|
|
|
|
var test = suite.tests[testIndex];
|
|
|
|
|
var anchor = document.createElement('a');
|
|
|
|
|
anchor.id = suite.name + '-' + test.name;
|
|
|
|
|
test.anchor = anchor;
|
2014-01-08 03:58:16 +00:00
|
|
|
anchor.appendChild(document.createTextNode(formatTestName(suite.name, test.name)));
|
2014-01-07 23:22:22 +00:00
|
|
|
testItem.appendChild(anchor);
|
|
|
|
|
testList.appendChild(testItem);
|
|
|
|
|
}
|
|
|
|
|
li.appendChild(testList);
|
2013-09-19 00:15:35 +00:00
|
|
|
|
2014-01-07 23:22:22 +00:00
|
|
|
ol.appendChild(li);
|
|
|
|
|
}
|
2013-10-06 22:07:48 +00:00
|
|
|
|
2014-01-07 23:22:22 +00:00
|
|
|
control.appendChild(ol);
|
2013-10-06 22:07:48 +00:00
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
var button = document.createElement('button');
|
|
|
|
|
button.textContent = 'Step';
|
|
|
|
|
button.onclick = onstep;
|
|
|
|
|
control.appendChild(button);
|
|
|
|
|
|
|
|
|
|
var button = document.createElement('button');
|
|
|
|
|
button.textContent = 'Run';
|
2017-05-16 21:16:51 +00:00
|
|
|
button.id = 'runSuites';
|
2014-01-08 03:58:16 +00:00
|
|
|
button.onclick = onrun;
|
|
|
|
|
control.appendChild(button);
|
|
|
|
|
|
2017-08-22 20:42:23 +00:00
|
|
|
var button = document.createElement('button');
|
|
|
|
|
button.textContent = 'Select all';
|
|
|
|
|
button.onclick = function () {
|
|
|
|
|
for (var suiteIndex = 0; suiteIndex < suites.length; suiteIndex++) {
|
|
|
|
|
suites[suiteIndex].disabled = false;
|
|
|
|
|
checkboxes[suiteIndex].checked = true;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
control.appendChild(button);
|
|
|
|
|
|
|
|
|
|
var button = document.createElement('button');
|
|
|
|
|
button.textContent = 'Unselect all';
|
|
|
|
|
button.onclick = function () {
|
|
|
|
|
for (var suiteIndex = 0; suiteIndex < suites.length; suiteIndex++) {
|
|
|
|
|
suites[suiteIndex].disabled = true;
|
|
|
|
|
checkboxes[suiteIndex].checked = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
control.appendChild(button);
|
|
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
return control;
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-16 21:16:51 +00:00
|
|
|
var parseQueryString = (function (pairList) {
|
|
|
|
|
var pairs = {};
|
|
|
|
|
for (var i = 0; i < pairList.length; ++i) {
|
|
|
|
|
var keyValue = pairList[i].split('=', 2);
|
|
|
|
|
if (keyValue.length == 1)
|
|
|
|
|
pairs[keyValue[0]] = '';
|
|
|
|
|
else
|
|
|
|
|
pairs[keyValue[0]] = decodeURIComponent(keyValue[1].replace(/\+/g, ' '));
|
|
|
|
|
}
|
|
|
|
|
return pairs;
|
|
|
|
|
})(window.location.search.substr(1).split('&'));
|
|
|
|
|
|
|
|
|
|
function disableAllSuitesExcept(suiteName) {
|
|
|
|
|
Suites.forEach(function(element) {
|
|
|
|
|
if (element.name !== suiteName)
|
|
|
|
|
element.disabled = true;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
function startTest() {
|
2017-05-16 21:16:51 +00:00
|
|
|
var queryParam = parseQueryString['suite'];
|
|
|
|
|
if (queryParam !== undefined)
|
|
|
|
|
disableAllSuitesExcept(queryParam);
|
|
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
var runner = new BenchmarkRunner(Suites, {
|
2014-01-07 23:22:22 +00:00
|
|
|
willRunTest: function (suite, test) {
|
|
|
|
|
test.anchor.classList.add('running');
|
|
|
|
|
},
|
|
|
|
|
didRunTest: function (suite, test) {
|
|
|
|
|
var classList = test.anchor.classList;
|
|
|
|
|
classList.remove('running');
|
|
|
|
|
classList.add('ran');
|
|
|
|
|
},
|
|
|
|
|
didRunSuites: function (measuredValues) {
|
|
|
|
|
var results = '';
|
2014-01-15 08:01:52 +00:00
|
|
|
for (var suiteName in measuredValues.tests) {
|
|
|
|
|
var suiteResults = measuredValues.tests[suiteName];
|
2014-01-07 23:22:22 +00:00
|
|
|
for (var testName in suiteResults.tests) {
|
|
|
|
|
var testResults = suiteResults.tests[testName];
|
2014-01-15 08:01:52 +00:00
|
|
|
for (var subtestName in testResults.tests) {
|
2014-01-07 23:22:22 +00:00
|
|
|
results += suiteName + ' : ' + testName + ' : ' + subtestName
|
2014-01-15 08:01:52 +00:00
|
|
|
+ ': ' + testResults.tests[subtestName] + ' ms\n';
|
2013-10-06 22:07:48 +00:00
|
|
|
}
|
2014-01-07 23:22:22 +00:00
|
|
|
}
|
|
|
|
|
results += suiteName + ' : ' + suiteResults.total + ' ms\n';
|
2013-10-06 22:07:48 +00:00
|
|
|
}
|
2017-09-25 21:11:35 +00:00
|
|
|
results += 'Arithmetic Mean : ' + measuredValues.mean + ' ms\n';
|
Compute the final score using geometric mean in Speedometer 2.0
https://bugs.webkit.org/show_bug.cgi?id=172968
Reviewed by Saam Barati.
Make Speedometer 2.0 use the geometric mean of the subtotal of each test suite instead of the total..
In Speedometer 1.0, we used the total time to compute the final score because we wanted to make
the slowest framework and library faster. The fastest suite (FlightJS) still accounted for ~6% and
the slowest case (React) accounted for ~25% so we felt the total time, or the arithmetic mean with
a constant factor, was a good metric to track.
In the latest version of Speedometer 2.0, however, the fastest suite (Preact) runs in ~55ms whereas
the slowest suite (Inferno) takes 1.5s on Safari. Since the total time is 6.5s, Preact's suite only
accounts for ~0.8% of the total score while Inferno's suite accounts for ~23% of the total score.
Since the goal of Speedometer is to approximate different kinds of DOM API use patterns on the Web,
we want each framework & library to have some measurement impact on the overall benchmark score.
Furthermore, after r221205, we're testing both debug build of Ember.js as well as release build.
Since debug build is 4x slower, using the total time or the arithmetic mean thereof will effectively
give 4x as much weight to debug build of Ember.js relative to release build of Ember.js. Given only
~5% of websites that deploy Ember.js use debug build, this weighting is clearly not right.
This patch, therefore, replaces the arithmetic mean by the geometric mean to compute the final score.
It also moves the code to compute the final score to BenchmarkRunner to be shared between main.js
and InteractiveRunner.html.
* Speedometer/InteractiveRunner.html:
(.didRunSuites): Show geometric mean, arithmetic mean, total, as well as the score for completeness
since this is a debugging page for developers.
* Speedometer/resources/benchmark-runner.js:
(BenchmarkRunner.prototype.step): Added mean, geomean, and score as measuredValues' properties.
(BenchmarkRunner.prototype._runTestAndRecordResults): Removed the dead code.
(BenchmarkRunner.prototype._finalize): Compute and add total, arithmetic mean (just mean in the code),
and geometric mean (geomean) to measuredValues.
* Speedometer/resources/main.js:
(window.benchmarkClient): Replaced testsCount by stepsCount and _timeValues by _measuredValuesList.
(window.benchmarkClient.willRunTest):
(window.benchmarkClient.didRunTest):
(window.benchmarkClient.didRunSuites): Store measuredValues object instead of just the total time.
(window.benchmarkClient.didFinishLastIteration):
(window.benchmarkClient._computeResults):
(window.benchmarkClient._computeResults.valueForUnit): Renamed from totalTimeInDisplayUnit. Now simply
retrieves the values computed by BenchmarkRunner's_finalize.
(startBenchmark):
(computeScore): Deleted.
Canonical link: https://commits.webkit.org/193020@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@221659 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-09-06 02:37:41 +00:00
|
|
|
results += 'Geometric Mean : ' + measuredValues.geomean + ' ms\n';
|
2014-01-15 08:01:52 +00:00
|
|
|
results += 'Total : ' + measuredValues.total + ' ms\n';
|
Compute the final score using geometric mean in Speedometer 2.0
https://bugs.webkit.org/show_bug.cgi?id=172968
Reviewed by Saam Barati.
Make Speedometer 2.0 use the geometric mean of the subtotal of each test suite instead of the total..
In Speedometer 1.0, we used the total time to compute the final score because we wanted to make
the slowest framework and library faster. The fastest suite (FlightJS) still accounted for ~6% and
the slowest case (React) accounted for ~25% so we felt the total time, or the arithmetic mean with
a constant factor, was a good metric to track.
In the latest version of Speedometer 2.0, however, the fastest suite (Preact) runs in ~55ms whereas
the slowest suite (Inferno) takes 1.5s on Safari. Since the total time is 6.5s, Preact's suite only
accounts for ~0.8% of the total score while Inferno's suite accounts for ~23% of the total score.
Since the goal of Speedometer is to approximate different kinds of DOM API use patterns on the Web,
we want each framework & library to have some measurement impact on the overall benchmark score.
Furthermore, after r221205, we're testing both debug build of Ember.js as well as release build.
Since debug build is 4x slower, using the total time or the arithmetic mean thereof will effectively
give 4x as much weight to debug build of Ember.js relative to release build of Ember.js. Given only
~5% of websites that deploy Ember.js use debug build, this weighting is clearly not right.
This patch, therefore, replaces the arithmetic mean by the geometric mean to compute the final score.
It also moves the code to compute the final score to BenchmarkRunner to be shared between main.js
and InteractiveRunner.html.
* Speedometer/InteractiveRunner.html:
(.didRunSuites): Show geometric mean, arithmetic mean, total, as well as the score for completeness
since this is a debugging page for developers.
* Speedometer/resources/benchmark-runner.js:
(BenchmarkRunner.prototype.step): Added mean, geomean, and score as measuredValues' properties.
(BenchmarkRunner.prototype._runTestAndRecordResults): Removed the dead code.
(BenchmarkRunner.prototype._finalize): Compute and add total, arithmetic mean (just mean in the code),
and geometric mean (geomean) to measuredValues.
* Speedometer/resources/main.js:
(window.benchmarkClient): Replaced testsCount by stepsCount and _timeValues by _measuredValuesList.
(window.benchmarkClient.willRunTest):
(window.benchmarkClient.didRunTest):
(window.benchmarkClient.didRunSuites): Store measuredValues object instead of just the total time.
(window.benchmarkClient.didFinishLastIteration):
(window.benchmarkClient._computeResults):
(window.benchmarkClient._computeResults.valueForUnit): Renamed from totalTimeInDisplayUnit. Now simply
retrieves the values computed by BenchmarkRunner's_finalize.
(startBenchmark):
(computeScore): Deleted.
Canonical link: https://commits.webkit.org/193020@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@221659 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-09-06 02:37:41 +00:00
|
|
|
results += 'Score : ' + measuredValues.score + ' rpm\n';
|
2013-10-06 22:07:48 +00:00
|
|
|
|
2014-01-07 23:22:22 +00:00
|
|
|
if (!results)
|
|
|
|
|
return;
|
2013-10-06 22:07:48 +00:00
|
|
|
|
2014-01-07 23:22:22 +00:00
|
|
|
var pre = document.createElement('pre');
|
|
|
|
|
document.body.appendChild(pre);
|
|
|
|
|
pre.textContent = results;
|
|
|
|
|
}
|
|
|
|
|
});
|
2013-09-19 08:07:48 +00:00
|
|
|
|
2014-01-07 23:22:22 +00:00
|
|
|
var currentState = null;
|
2013-10-05 09:41:19 +00:00
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
// Don't call step while step is already executing.
|
|
|
|
|
document.body.appendChild(createUIForSuites(Suites,
|
|
|
|
|
function () { runner.step(currentState).then(function (state) { currentState = state; }); },
|
2014-01-15 08:01:52 +00:00
|
|
|
function () { runner.runAllSteps(currentState); currentState = null; }));
|
2017-05-16 21:16:51 +00:00
|
|
|
|
|
|
|
|
if (parseQueryString['startAutomatically'] !== undefined)
|
|
|
|
|
document.getElementById('runSuites').click();
|
2014-01-08 03:58:16 +00:00
|
|
|
}
|
2013-09-19 00:15:35 +00:00
|
|
|
|
2014-01-08 03:58:16 +00:00
|
|
|
window.addEventListener('load', startTest);
|
2013-09-25 22:18:52 +00:00
|
|
|
|
2013-09-19 00:15:35 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|