mirror of
https://github.com/scratchfoundation/scratch-vm.git
synced 2024-12-25 07:22:33 -05:00
Produce a benchmark share link storing the report in the url
This commit is contained in:
parent
c6f4d89371
commit
479f1ba163
3 changed files with 122 additions and 13 deletions
|
@ -11,16 +11,42 @@ p {
|
||||||
left: 450px;
|
left: 450px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.share {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.share label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.share[href] {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.render .profile-tables {
|
||||||
|
position: static;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.render .description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.render .run-push {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
#scratch-stage {
|
#scratch-stage {
|
||||||
border: 5px solid black;
|
border: 5px solid black;
|
||||||
display: block;
|
display: block;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
.render #scratch-stage {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.loading label, .profile-count label{
|
.loading label, .profile-count label{
|
||||||
width: 15em;
|
width: 15em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
.render .loading {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.profile-tables table {
|
.profile-tables table {
|
||||||
margin: 30px 0 30px 0px;
|
margin: 30px 0 30px 0px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,12 +13,20 @@ document.querySelector('.run')
|
||||||
location.reload();
|
location.reload();
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
|
const setShareLink = function (json) {
|
||||||
|
document.querySelector('.share')
|
||||||
|
.href = `#view/${btoa(JSON.stringify(json))}`;
|
||||||
|
document.querySelectorAll('.share')[1]
|
||||||
|
.href = `suite.html`;
|
||||||
|
};
|
||||||
|
|
||||||
const loadProject = function () {
|
const loadProject = function () {
|
||||||
let id = location.hash.substring(1).split(',')[0];
|
let id = location.hash.substring(1).split(',')[0];
|
||||||
if (id.length < 1 || !isFinite(id)) {
|
if (id.length < 1 || !isFinite(id)) {
|
||||||
id = projectInput.value;
|
id = projectInput.value;
|
||||||
}
|
}
|
||||||
Scratch.vm.downloadProjectId(id);
|
Scratch.vm.downloadProjectId(id);
|
||||||
|
return id;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -221,6 +229,13 @@ const frameOrder = [
|
||||||
'Runtime._step'
|
'Runtime._step'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const trackSlowFrames = [
|
||||||
|
'Sequencer.stepThreads',
|
||||||
|
'Sequencer.stepThreads#inner',
|
||||||
|
'Sequencer.stepThread',
|
||||||
|
'execute'
|
||||||
|
];
|
||||||
|
|
||||||
class FramesTable extends StatTable {
|
class FramesTable extends StatTable {
|
||||||
constructor (options) {
|
constructor (options) {
|
||||||
super(options);
|
super(options);
|
||||||
|
@ -241,12 +256,7 @@ class FramesTable extends StatTable {
|
||||||
}
|
}
|
||||||
|
|
||||||
isSlow (key, frame) {
|
isSlow (key, frame) {
|
||||||
return ([
|
return (trackSlowFrames.indexOf(key) > 0 &&
|
||||||
'Sequencer.stepThreads',
|
|
||||||
'Sequencer.stepThreads#inner',
|
|
||||||
'Sequencer.stepThread',
|
|
||||||
'execute'
|
|
||||||
].indexOf(key) > 0 &&
|
|
||||||
frame.selfTime / frame.totalTime > SLOW);
|
frame.selfTime / frame.totalTime > SLOW);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -346,7 +356,7 @@ class ProfilerRun {
|
||||||
}
|
}
|
||||||
|
|
||||||
run () {
|
run () {
|
||||||
loadProject();
|
this.projectId = loadProject();
|
||||||
|
|
||||||
window.parent.postMessage({
|
window.parent.postMessage({
|
||||||
type: 'BENCH_MESSAGE_LOADING'
|
type: 'BENCH_MESSAGE_LOADING'
|
||||||
|
@ -378,12 +388,49 @@ class ProfilerRun {
|
||||||
frames: this.frames.frames,
|
frames: this.frames.frames,
|
||||||
opcodes: this.opcodes.opcodes
|
opcodes: this.opcodes.opcodes
|
||||||
}, '*');
|
}, '*');
|
||||||
|
|
||||||
|
setShareLink({
|
||||||
|
fixture: {
|
||||||
|
projectId: this.projectId,
|
||||||
|
warmUpTime: this.warmUpTime,
|
||||||
|
recordingTime: this.maxRecordedTime
|
||||||
|
},
|
||||||
|
frames: this.frames.frames,
|
||||||
|
opcodes: this.opcodes.opcodes
|
||||||
|
});
|
||||||
}, 100 + this.warmUpTime + this.maxRecordedTime);
|
}, 100 + this.warmUpTime + this.maxRecordedTime);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
render (json) {
|
||||||
|
const {fixture} = json;
|
||||||
|
document.querySelector('[type=text]').value = [
|
||||||
|
fixture.projectId,
|
||||||
|
fixture.warmUpTime,
|
||||||
|
fixture.recordingTime
|
||||||
|
].join(',');
|
||||||
|
|
||||||
|
this.frames.frames = json.frames.map(
|
||||||
|
frame => Object.assign(new StatView(), frame, {
|
||||||
|
name: this.profiler.nameById(this.profiler.idByName(frame.name))
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
this.opcodes.opcodes = {};
|
||||||
|
Object.entries(json.opcodes).forEach(([opcode, data]) => {
|
||||||
|
this.opcodes.opcodes[opcode] = Object.assign(new StatView(), data);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.frameTable.render();
|
||||||
|
this.opcodeTable.render();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = function () {
|
/**
|
||||||
|
* Run the benchmark with given parameters in the location's hash field or
|
||||||
|
* using defaults.
|
||||||
|
*/
|
||||||
|
const runBenchmark = function () {
|
||||||
// Lots of global variables to make debugging easier
|
// Lots of global variables to make debugging easier
|
||||||
// Instantiate the VM.
|
// Instantiate the VM.
|
||||||
const vm = new window.VirtualMachine();
|
const vm = new window.VirtualMachine();
|
||||||
|
@ -493,3 +540,29 @@ window.onload = function () {
|
||||||
// Run threads
|
// Run threads
|
||||||
vm.start();
|
vm.start();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render previously run benchmark data.
|
||||||
|
* @param {object} json data from a previous benchmark run.
|
||||||
|
*/
|
||||||
|
const renderBenchmarkData = function (json) {
|
||||||
|
const vm = new window.VirtualMachine();
|
||||||
|
new ProfilerRun({vm}).render(json);
|
||||||
|
setShareLink(json);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
if (location.hash.substring(1).startsWith('view')) {
|
||||||
|
document.body.className = 'render';
|
||||||
|
const data = location.hash.substring(6);
|
||||||
|
const frozen = atob(data);
|
||||||
|
const json = JSON.parse(frozen);
|
||||||
|
renderBenchmarkData(json);
|
||||||
|
} else {
|
||||||
|
runBenchmark();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onhashchange = function () {
|
||||||
|
location.reload();
|
||||||
|
};
|
||||||
|
|
|
@ -8,19 +8,21 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h2>Scratch VM Benchmark</h2>
|
<h2>Scratch VM Benchmark</h2>
|
||||||
<p>
|
<p class="description">
|
||||||
Welcome to the scratch-vm benchmark. This tool helps you profile a scratch
|
Welcome to the scratch-vm benchmark. This tool helps you profile a scratch
|
||||||
project. When you load the page, it:
|
project. When you load the page, it:
|
||||||
<ol>
|
<ol class="description">
|
||||||
<li>loads the default project and enables turbo mode
|
<li>loads the default project and enables turbo mode
|
||||||
<li>runs the project for 4 seconds to warm up
|
<li>runs the project for 4 seconds to warm up
|
||||||
<li>profiles for 6 seconds
|
<li>profiles for 6 seconds
|
||||||
<li>stops and reports
|
<li>stops and reports
|
||||||
</ol>
|
</ol>
|
||||||
</p>
|
</p>
|
||||||
<input type="text" value="119615668">
|
<div class="run-form">
|
||||||
<button class="run">run</button>
|
<input type="text" value="119615668">
|
||||||
<p>
|
<button class="run">run</button>
|
||||||
|
</div>
|
||||||
|
<p class="run-push">
|
||||||
<i>Try a different project, like `130041250`</i>
|
<i>Try a different project, like `130041250`</i>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
@ -43,6 +45,14 @@
|
||||||
<label>Blocks executed:</label>
|
<label>Blocks executed:</label>
|
||||||
<span class="profile-count-value profile-count-blocks-executed">...</span>
|
<span class="profile-count-value profile-count-blocks-executed">...</span>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="share"><div class="profile-count">
|
||||||
|
<label>Share this report</label>
|
||||||
|
</div></a>
|
||||||
|
<a class="share" target="_parent">
|
||||||
|
<div class="profile-count">
|
||||||
|
<label>Run the full suite</label>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="profile-tables">
|
<div class="profile-tables">
|
||||||
|
|
Loading…
Reference in a new issue