Skip to content
This repository has been archived by the owner on Sep 10, 2022. It is now read-only.

Test optionating #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,18 @@ <h1>Web Latency Benchmark</h1>
The benchmark server is no longer running. You must restart it before running the test.
</div>

<div>
<h4>List of Available Tests</h4>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this page needs a list of tests. I prefer not to have the list of tests in two places. I'll definitely forget to update one or the other.

<ul>
<li>1. Keydown latency</li>
<li>2. Scroll latency</li>
<li>3. Native reference</li>
<li>4. Baseline jank</li>>
<li>5. Javascript jank</li>
<li>6. Image loading jank</li>
<li>7. Worker GC Load</li>
</ul>
</div>


<script src="keep-server-alive.js"></script>
90 changes: 65 additions & 25 deletions html/latency-benchmark.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,19 @@ var preventContextMenuAndSelection = function(e) {
return false;
}

var parseUrl = function(q) {
var exp = q.substr(q.indexOf("=") + 1, q.length);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using substr/indexOf, you can use one regex to do it all: /(?:^|&)parameterName=([^&]+)/ will match parameterName anywhere in the query string and give you the value as the first group of the match.

return exp.split(exp.match(/\D/));
};

var genArray = function(range) {
var arr = new Array();
for(var i = 0; i < range; i++) {
arr[i] = i+1;
}

return arr;
}

var addEvents = function() {
document.addEventListener('keydown', preventContextMenuAndSelection);
Expand Down Expand Up @@ -142,12 +155,26 @@ var spinDone = true;
workerHandlers.spin = function(e) {
spinDone = true;
};
workerHandlers.gcLoad = function(e) {
return test.finishedMeasuring = true;
};

// We don't use getPrefixed here because we want to replace the unprefixed version with the prefixed one if it exists.
if (worker) {
worker.postMessage = worker.webkitPostMessage || worker.mozPostMessage || worker.oPostMessage ||worker.msPostMessage || worker.postMessage;
}

var workerGCLoad = function() {
if (!worker)
return fail(this);
var test = this;
try {
worker.postMessage({test: 'gcLoad'});
} catch(e) {
fail(this);
}
}

var checkTransferables = function() {
if (!worker || !window.ArrayBuffer)
return fail(this);
Expand Down Expand Up @@ -427,6 +454,9 @@ var tests = [
{ name: 'Image loading jank',
info: 'Tests responsiveness during image loading.',
test: testJank, blocker: loadGiantImage, report: ['css', 'js', 'scroll'] },
{ name: 'Worker GC Load',
info: 'Tests if worker GC affects main page.',
test: testJank, blocker: workerGCLoad, report: ['js', 'scroll'] },
// These tests work, but are disabled for now to focus on the latency test.
// { name: 'requestAnimationFrame', test: checkName, toCheck: 'requestAnimationFrame' },
// { name: 'Canvas 2D', test: checkName, toCheck: 'HTMLCanvasElement' },
Expand Down Expand Up @@ -474,29 +504,39 @@ var tests = [
// { name: 'Worker GC doesn\'t affect main page', test: testJank, blocker: workerGCLoad },
];

for (var i = 0; i < tests.length; i++) {
var test = tests[i];
var row = document.createElement('tr');
var nameCell = document.createElement('td');
var resultCell = document.createElement('td');
var infoCell = document.createElement('td');
nameCell.className = 'testName';
nameCell.textContent = test.name;
var description = document.createElement('div');
description.className = 'testDescription';
nameCell.appendChild(description);
if (test.info) {
description.textContent = test.info;
if(window.location.search) {
var testIndexes = parseUrl(window.location.search);
}

var testList = testIndexes || genArr(tests.length);

for (var i = 0; i < testList.length; i++) {
if(testList[i] <= tests.length) {
var test = tests[testList[i]-1];
var row = document.createElement('tr');
var nameCell = document.createElement('td');
var resultCell = document.createElement('td');
var infoCell = document.createElement('td');
nameCell.className = 'testName';
nameCell.textContent = test.name;
var description = document.createElement('div');
description.className = 'testDescription';
nameCell.appendChild(description);
if (test.info) {
description.textContent = test.info;
}
resultCell.className = 'testResult';
test.resultCell = document.createElement('div');
resultCell.appendChild(test.resultCell);
infoCell.className = 'testInfo';
test.infoCell = infoCell;
row.appendChild(nameCell);
row.appendChild(resultCell);
row.appendChild(infoCell);
table.appendChild(row);
} else {
document.getElementById("progressMessage").textContent = "Error: test index "+ testList[i] +" out of range.";
}
resultCell.className = 'testResult';
test.resultCell = document.createElement('div');
resultCell.appendChild(test.resultCell);
infoCell.className = 'testInfo';
test.infoCell = infoCell;
row.appendChild(nameCell);
row.appendChild(resultCell);
row.appendChild(infoCell);
table.appendChild(row);
}

var nextTestIndex = 0;
Expand All @@ -509,13 +549,13 @@ var runNextTest = function(previousTest) {
return;
}
previousTest.finished = true;
if (previousTest != tests[nextTestIndex - 1]) {
if (previousTest != tests[testList[nextTestIndex - 1]-1]) {
previousTest.infoCell.textContent = "Error: test sent results out of order";
return;
}
}
var testIndex = nextTestIndex++;
if (testIndex >= tests.length) {
if (testIndex >= testList.length) {
// All tests successfully completed. Report the overall score as a number out of 10.
var scoreRatio = totalScore / totalPossibleScore;
var score = document.getElementById('score');
Expand All @@ -528,7 +568,7 @@ var runNextTest = function(previousTest) {
// End the test run.
return;
}
var test = tests[testIndex];
var test = tests[testList[testIndex]-1];
test.infoCell.textContent = '';
test.resultCell.textContent = '⋯';
setTimeout(function() { checkTimeout(test); }, 50000);
Expand Down
24 changes: 24 additions & 0 deletions html/worker.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,30 @@ self.onmessage = function(e) {
var start = getMs();
while (getMs() - e.data.lengthMs < start);
self.postMessage(e.data);
} else if (e.data.test == 'gcLoad') {
var createObjects = function(n) {
var a = new Array(1000*n);
var count = 0;
for(var i=0; i<g.length; i++) {
g[i] = {count: count++};
}

var generateGarbage = function() {
var i;
for(i=0; i<g.length; i++) {
g[i] = {count: g[i].count * 2};
}
};

return generateGarbage;
};

var gen = createObjects(20);
var start = getMs();
while (getMs() - start < 1000) {
gen();
}
self.postMessage(e.data);
} else {
console.error('unknown worker message: ' + e.data.test);
}
Expand Down