Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
var stroke = {
gcslice: "rgb(255,100,0)",
minor: "rgb(0,255,100)",
initialMajor: "rgb(180,60,255)",
};
var numSamples = 500;
var tests = new Map();
var gHistogram = new Map(); // {ms: count}
var gHistory = new FrameHistory(numSamples);
var gPerf = new PerfTracker();
var latencyGraph;
var memoryGraph;
var ctx;
var memoryCtx;
var loadState = "(init)"; // One of '(active)', '(inactive)', '(N/A)'
var testState = "idle"; // One of 'idle' or 'running'.
var enabled = { trackingSizes: false };
var gMemory = performance.mozMemory?.gc || performance.mozMemory || {};
var Firefox = class extends Host {
start_turn() {
// Handled by Gecko.
}
end_turn() {
// Handled by Gecko.
}
suspend(duration) {
// Not used; requestAnimationFrame takes its place.
throw new Error("unimplemented");
}
get minorGCCount() {
return gMemory.minorGCCount;
}
get majorGCCount() {
return gMemory.majorGCCount;
}
get GCSliceCount() {
return gMemory.sliceCount;
}
get gcBytes() {
return gMemory.zone.gcBytes;
}
get mallocBytes() {
return gMemory.zone.mallocBytes;
}
get gcAllocTrigger() {
return gMemory.zone.gcAllocTrigger;
}
get mallocTrigger() {
return gMemory.zone.mallocTriggerBytes;
}
features = {
haveMemorySizes: 'gcBytes' in gMemory,
haveGCCounts: 'majorGCCount' in gMemory,
};
};
var gHost = new Firefox();
function parse_units(v) {
if (!v.length) {
return NaN;
}
var lastChar = v[v.length - 1].toLowerCase();
if (!isNaN(parseFloat(lastChar))) {
return parseFloat(v);
}
var units = parseFloat(v.substr(0, v.length - 1));
if (lastChar == "k") {
return units * 1e3;
}
if (lastChar == "m") {
return units * 1e6;
}
if (lastChar == "g") {
return units * 1e9;
}
return NaN;
}
var Graph = class {
constructor(canvas) {
this.ctx = canvas.getContext('2d');
// Adjust scale for high-DPI displays.
this.scale = window.devicePixelRatio || 1;
let rect = canvas.getBoundingClientRect();
canvas.width = Math.floor(rect.width * this.scale);
canvas.height = Math.floor(rect.height * this.scale);
canvas.style.width = rect.width;
canvas.style.height = rect.height;
// Record canvas size to draw into.
this.width = canvas.width;
this.height = canvas.height;
this.layout = {
xAxisLabel_Y: this.height - 20 * this.scale,
};
}
xpos(index) {
return (index / numSamples) * (this.width - 100 * this.scale);
}
clear() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
drawScale(delay) {
this.drawHBar(delay, `${delay}ms`, "rgb(150,150,150)");
}
draw60fps() {
this.drawHBar(1000 / 60, "60fps", "#00cf61", 25);
}
draw30fps() {
this.drawHBar(1000 / 30, "30fps", "#cf0061", 25);
}
drawAxisLabels(x_label, y_label) {
const ctx = this.ctx;
ctx.font = `${10 * this.scale}px sans-serif`;
ctx.fillText(x_label, this.width / 2, this.layout.xAxisLabel_Y);
ctx.save();
ctx.rotate(Math.PI / 2);
var start = this.height / 2 - ctx.measureText(y_label).width / 2;
ctx.fillText(y_label, start, -this.width + 20 * this.scale);
ctx.restore();
}
drawFrame() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
// Draw frame to show size
ctx.strokeStyle = "rgb(0,0,0)";
ctx.fillStyle = "rgb(0,0,0)";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(width, 0);
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.closePath();
ctx.stroke();
}
};
var LatencyGraph = class extends Graph {
constructor(ctx) {
super(ctx);
}
ypos(delay) {
return this.height + this.scale * (100 - Math.log(delay) * 64);
}
drawHBar(delay, label, color = "rgb(0,0,0)", label_offset = 0) {
const ctx = this.ctx;
let y = this.ypos(delay);
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.fillText(
label,
this.xpos(numSamples) + 4 + label_offset,
this.ypos(delay) + 3
);
ctx.beginPath();
ctx.moveTo(this.xpos(0), this.ypos(delay));
ctx.lineTo(this.xpos(numSamples) + label_offset, this.ypos(delay));
ctx.stroke();
ctx.strokeStyle = "rgb(0,0,0)";
ctx.fillStyle = "rgb(0,0,0)";
}
draw() {
const ctx = this.ctx;
this.clear();
this.drawFrame();
for (var delay of [10, 20, 30, 50, 100, 200, 400, 800]) {
this.drawScale(delay);
}
this.draw60fps();
this.draw30fps();
var worst = 0,
worstpos = 0;
ctx.beginPath();
for (let i = 0; i < numSamples; i++) {
ctx.lineTo(this.xpos(i), this.ypos(gHistory.delays[i]));
if (gHistory.delays[i] >= worst) {
worst = gHistory.delays[i];
worstpos = i;
}
}
ctx.stroke();
// Draw vertical lines marking minor and major GCs
if (gHost.features.haveGCCounts) {
ctx.strokeStyle = stroke.gcslice;
let idx = sampleIndex % numSamples;
const count = {
major: gHistory.majorGCs[idx],
minor: 0,
slice: gHistory.slices[idx],
};
for (let i = 0; i < numSamples; i++) {
idx = (sampleIndex + i) % numSamples;
const isMajorStart = count.major < gHistory.majorGCs[idx];
if (count.slice < gHistory.slices[idx]) {
if (isMajorStart) {
ctx.strokeStyle = stroke.initialMajor;
}
ctx.beginPath();
ctx.moveTo(this.xpos(idx), 0);
ctx.lineTo(this.xpos(idx), this.layout.xAxisLabel_Y);
ctx.stroke();
if (isMajorStart) {
ctx.strokeStyle = stroke.gcslice;
}
}
count.major = gHistory.majorGCs[idx];
count.slice = gHistory.slices[idx];
}
ctx.strokeStyle = stroke.minor;
idx = sampleIndex % numSamples;
count.minor = gHistory.minorGCs[idx];
for (let i = 0; i < numSamples; i++) {
idx = (sampleIndex + i) % numSamples;
if (count.minor < gHistory.minorGCs[idx]) {
ctx.beginPath();
ctx.moveTo(this.xpos(idx), 0);
ctx.lineTo(this.xpos(idx), 20);
ctx.stroke();
}
count.minor = gHistory.minorGCs[idx];
}
}
ctx.fillStyle = "rgb(255,0,0)";
if (worst) {
ctx.fillText(
`${worst.toFixed(2)}ms`,
this.xpos(worstpos) - 10,
this.ypos(worst) - 14
);
}
// Mark and label the slowest frame
ctx.beginPath();
var where = sampleIndex % numSamples;
ctx.arc(
this.xpos(where),
this.ypos(gHistory.delays[where]),
5,
0,
Math.PI * 2,
true
);
ctx.fill();
ctx.fillStyle = "rgb(0,0,0)";
this.drawAxisLabels("Time", "Pause between frames (log scale)");
}
};
var MemoryGraph = class extends Graph {
constructor(ctx) {
super(ctx);
this.range = 1;
}
ypos(size) {
const percent = size / this.range;
return (1 - percent) * this.height * 0.9 + this.scale * 20;
}
drawHBarForBytes(size, name, color) {
this.drawHBar(size, `${format_bytes(size)} ${name}`, color)
}
drawHBar(size, label, color) {
const ctx = this.ctx;
const y = this.ypos(size);
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.fillText(label, this.xpos(numSamples) + 4, y + 3);
ctx.beginPath();
ctx.moveTo(this.xpos(0), y);
ctx.lineTo(this.xpos(numSamples), y);
ctx.stroke();
ctx.strokeStyle = "rgb(0,0,0)";
ctx.fillStyle = "rgb(0,0,0)";
}
draw() {
const ctx = this.ctx;
this.clear();
this.drawFrame();
let gcMaxPos = 0;
let mallocMaxPos = 0;
let gcMax = 0;
let mallocMax = 0;
for (let i = 0; i < numSamples; i++) {
if (gHistory.gcBytes[i] >= gcMax) {
gcMax = gHistory.gcBytes[i];
gcMaxPos = i;
}
if (gHistory.mallocBytes[i] >= mallocMax) {
mallocMax = gHistory.mallocBytes[i];
mallocMaxPos = i;
}
}
this.range = Math.max(gcMax, mallocMax, gHost.gcAllocTrigger, gHost.mallocTrigger);
this.drawHBarForBytes(gcMax, "GC max", "#00cf61");
this.drawHBarForBytes(mallocMax, "Malloc max", "#cc1111");
this.drawHBarForBytes(gHost.gcAllocTrigger, "GC trigger", "#cc11cc");
this.drawHBarForBytes(gHost.mallocTrigger, "Malloc trigger", "#cc11cc");
ctx.fillStyle = "rgb(255,0,0)";
if (gcMax !== 0) {
ctx.fillText(
format_bytes(gcMax),
this.xpos(gcMaxPos) - 10,
this.ypos(gcMax) - 14
);
}
if (mallocMax !== 0) {
ctx.fillText(
format_bytes(mallocMax),
this.xpos(mallocMaxPos) - 10,
this.ypos(mallocMax) - 14
);
}
const where = sampleIndex % numSamples;
ctx.beginPath();
ctx.arc(
this.xpos(where),
this.ypos(gHistory.gcBytes[where]),
5,
0,
Math.PI * 2,
true
);
ctx.fill();
ctx.beginPath();
ctx.arc(
this.xpos(where),
this.ypos(gHistory.mallocBytes[where]),
5,
0,
Math.PI * 2,
true
);
ctx.fill();
ctx.beginPath();
for (let i = 0; i < numSamples; i++) {
let x = this.xpos(i);
let y = this.ypos(gHistory.gcBytes[i]);
if (i == (sampleIndex + 1) % numSamples) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
if (i == where) {
ctx.stroke();
}
}
ctx.stroke();
ctx.beginPath();
for (let i = 0; i < numSamples; i++) {
let x = this.xpos(i);
let y = this.ypos(gHistory.mallocBytes[i]);
if (i == (sampleIndex + 1) % numSamples) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
if (i == where) {
ctx.stroke();
}
}
ctx.stroke();
ctx.fillStyle = "rgb(0,0,0)";
this.drawAxisLabels("Time", "Heap Memory Usage");
}
};
function onUpdateDisplayChanged() {
const do_graph = document.getElementById("do-graph");
if (do_graph.checked) {
window.requestAnimationFrame(handler);
gHistory.resume();
} else {
gHistory.pause();
}
update_load_state_indicator();
}
function onDoLoadChange() {
const do_load = document.getElementById("do-load");
gLoadMgr.paused = !do_load.checked;
console.log(`load paused: ${gLoadMgr.paused}`);
update_load_state_indicator();
}
var previous = 0;
function handler(timestamp) {
if (gHistory.is_stopped()) {
return;
}
const completed = gLoadMgr.tick(timestamp);
if (completed) {
end_test(timestamp, gLoadMgr.lastActive);
if (!gLoadMgr.stopped()) {
start_test();
}
update_load_display();
}
if (testState == "running") {
document.getElementById("test-progress").textContent =
(gLoadMgr.currentLoadRemaining(timestamp) / 1000).toFixed(1) + " sec";
}
const delay = gHistory.on_frame(timestamp);
update_histogram(gHistogram, delay);
latencyGraph.draw();
if (memoryGraph) {
memoryGraph.draw();
}
window.requestAnimationFrame(handler);
}
// For interactive debugging.
//
// ['a', 'b', 'b', 'b', 'c', 'c'] => ['a', 'b x 3', 'c x 2']
function summarize(arr) {
if (!arr.length) {
return [];
}
var result = [];
var run_start = 0;
var prev = arr[0];
for (let i = 1; i <= arr.length; i++) {
if (i == arr.length || arr[i] != prev) {
if (i == run_start + 1) {
result.push(arr[i]);
} else {
result.push(prev + " x " + (i - run_start));
}
run_start = i;
}
if (i != arr.length) {
prev = arr[i];
}
}
return result;
}
function reset_draw_state() {
gHistory.reset();
}
function onunload() {
if (gLoadMgr) {
gLoadMgr.deactivateLoad();
}
}
async function onload() {
// Collect all test loads into the `tests` Map.
let imports = [];
foreach_test_file(path => imports.push(import("./" + path)));
await Promise.all(imports);
// The order of `tests` is currently based on their asynchronous load
// order, rather than the listed order. Rearrange by extracting the test
// names from their filenames, which is kind of gross.
_tests = tests;
tests = new Map();
foreach_test_file(fn => {
// "benchmarks/foo.js" => "foo"
const name = fn.split(/\//)[1].split(/\./)[0];
tests.set(name, _tests.get(name));
});
_tests = undefined;
gLoadMgr = new AllocationLoadManager(tests);
// Load initial test duration.
duration_changed();
// Load initial garbage size.
garbage_piles_changed();
garbage_per_frame_changed();
// Populate the test selection dropdown.
var select = document.getElementById("test-selection");
for (var [name, test] of tests) {
test.name = name;
var option = document.createElement("option");
option.id = name;
option.text = name;
option.title = test.description;
select.add(option);
}
// Load the initial test.
gLoadMgr.setActiveLoad(gLoadMgr.getByName("noAllocation"));
update_load_display();
document.getElementById("test-selection").value = "noAllocation";
// Polyfill rAF.
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
// Acquire our canvas.
var canvas = document.getElementById("graph");
latencyGraph = new LatencyGraph(canvas);
if (!gHost.features.haveMemorySizes) {
document.getElementById("memgraph-disabled").style.display = "block";
document.getElementById("track-sizes-div").style.display = "none";
}
trackHeapSizes(document.getElementById("track-sizes").checked);
update_load_state_indicator();
gHistory.start();
// Start drawing.
reset_draw_state();
window.requestAnimationFrame(handler);
}
function run_one_test() {
start_test_cycle([gLoadMgr.activeLoad().name]);
}
function run_all_tests() {
start_test_cycle([...tests.keys()]);
}
function start_test_cycle(tests_to_run) {
// Convert from an iterable to an array for pop.
const duration = gLoadMgr.testDurationMS / 1000;
const mutators = tests_to_run.map(name => new SingleMutatorSequencer(gLoadMgr.getByName(name), gPerf, duration));
const sequencer = new ChainSequencer(mutators);
gLoadMgr.startSequencer(sequencer);
testState = "running";
gHistogram.clear();
reset_draw_state();
}
function update_load_state_indicator() {
if (
!gLoadMgr.load_running() ||
gLoadMgr.activeLoad().name == "noAllocation"
) {
loadState = "(none)";
} else if (gHistory.is_stopped() || gLoadMgr.paused) {
loadState = "(inactive)";
} else {
loadState = "(active)";
}
document.getElementById("load-running").textContent = loadState;
}
function start_test() {
console.log(`Running test: ${gLoadMgr.activeLoad().name}`);
document.getElementById("test-selection").value = gLoadMgr.activeLoad().name;
update_load_state_indicator();
}
function end_test(timestamp, load) {
document.getElementById("test-progress").textContent = "(not running)";
report_test_result(load, gHistogram);
gHistogram.clear();
console.log(`Ending test ${load.name}`);
if (gLoadMgr.stopped()) {
testState = "idle";
}
update_load_state_indicator();
reset_draw_state();
}
function compute_test_spark_histogram(histogram) {
const percents = compute_spark_histogram_percents(histogram);
var sparks = "▁▂▃▄▅▆▇█";
var colors = [
"#aaaa00",
"#007700",
"#dd0000",
"#ff0000",
"#ff0000",
"#ff0000",
"#ff0000",
"#ff0000",
];
var line = "";
for (let i = 0; i < percents.length; ++i) {
var spark = sparks.charAt(parseInt(percents[i] * sparks.length));
line += `<span style="color:${colors[i]}">${spark}</span>`;
}
return line;
}
function report_test_result(load, histogram) {
var resultList = document.getElementById("results-display");
var resultElem = document.createElement("div");
var score = compute_test_score(histogram);
var sparks = compute_test_spark_histogram(histogram);
var params = `(${format_num(load.garbagePerFrame)},${format_num(
load.garbagePiles
)})`;
resultElem.innerHTML = `${score.toFixed(3)} ms/s : ${sparks} : ${
load.name
}${params} - ${load.description}`;
resultList.appendChild(resultElem);
}
function update_load_display() {
const garbage = gLoadMgr.activeLoad()
? gLoadMgr.activeLoad().garbagePerFrame
: parse_units(gDefaultGarbagePerFrame);
document.getElementById("garbage-per-frame").value = format_num(garbage);
const piles = gLoadMgr.activeLoad()
? gLoadMgr.activeLoad().garbagePiles
: parse_units(gDefaultGarbagePiles);
document.getElementById("garbage-piles").value = format_num(piles);
update_load_state_indicator();
}
function duration_changed() {
var durationInput = document.getElementById("test-duration");
gLoadMgr.testDurationMS = parseInt(durationInput.value) * 1000;
console.log(
`Updated test duration to: ${gLoadMgr.testDurationMS / 1000} seconds`
);
}
function onLoadChange() {
var select = document.getElementById("test-selection");
console.log(`Switching to test: ${select.value}`);
gLoadMgr.setActiveLoad(gLoadMgr.getByName(select.value));
update_load_display();
gHistogram.clear();
reset_draw_state();
}
function garbage_piles_changed() {
const input = document.getElementById("garbage-piles");
const value = parse_units(input.value);
if (isNaN(value)) {
update_load_display();
return;
}
if (gLoadMgr.load_running()) {
gLoadMgr.change_garbagePiles(value);
console.log(
`Updated garbage-piles to ${gLoadMgr.activeLoad().garbagePiles} items`
);
}
gHistogram.clear();
reset_draw_state();
}
function garbage_per_frame_changed() {
const input = document.getElementById("garbage-per-frame");
var value = parse_units(input.value);
if (isNaN(value)) {
update_load_display();
return;
}
if (gLoadMgr.load_running()) {
gLoadMgr.change_garbagePerFrame(value);
console.log(
`Updated garbage-per-frame to ${
gLoadMgr.activeLoad().garbagePerFrame
} items`
);
}
}
function trackHeapSizes(track) {
enabled.trackingSizes = track && gHost.features.haveMemorySizes;
var canvas = document.getElementById("memgraph");
if (enabled.trackingSizes) {
canvas.style.display = "block";
memoryGraph = new MemoryGraph(canvas);
} else {
canvas.style.display = "none";
memoryGraph = null;
}
}