Skip to content

Commit

Permalink
split result table
Browse files Browse the repository at this point in the history
  • Loading branch information
@krausest
krausest committed Jan 11, 2017
1 parent 93c57f7 commit 9a548fc
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 125 deletions.
85 changes: 48 additions & 37 deletions webdriver-ts/src/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,47 +17,58 @@ export let config = {
export interface FrameworkData {
name: string;
uri: string;
nonKeyed: boolean;
useShadowRoot: boolean;
}

function f(name: string, uri: string = null, useShadowRoot = false): FrameworkData {
return {name, uri: uri ? uri : name, useShadowRoot};
interface Options {
uri: string;
useShadowRoot? : boolean;
}

function f(name: string, nonKeyed: boolean, options: Options = {uri: null, useShadowRoot: false}): FrameworkData {
let ret = {name, nonKeyed, uri: options.uri ? options.uri : name, useShadowRoot: options.useShadowRoot};
console.log("framework ", ret);
return ret;
}

export let frameworks = [
f("angular-v1.5.8"),
f("angular-v2.2.1"),
f("aurelia-v1.0.7", "aurelia-v1.0.7/dist"),
f("binding.scala-v10.0.1", "binding.scala-v10.0.1/target/web/stage"),
f("bobril-v4.49.2"),
f("cyclejs-dom-v14.1.0"),
f("dio-v3.0.5"),
f("domvm-v1.2.10"),
f("domvm-v2.0.0-beta"),
f("ember-v2.6.1", "ember-v2.6.1/dist"),
f("ember-v2.10.0-beta.2", "ember-v2.10.0-beta.2/dist"),
f("elm-v0.18.0"),
f("inferno-v1.0.0-beta9"),
f("kivi-v1.0.0-rc2"),
f("knockout-v3.4.1"),
f("mithril-v0.2.5"),
f("mithril-v1.0.0-alpha"),
f("nx-v1.0.0-alpha.4.0.0"),
f("plastiq-v1.33.0"),
f("polymer-v1.7.0", "polymer-v1.7.0", true),
f("preact-v6.4.0"),
f("svelte-v1.0.1"),
f("ractive-v0.8.5"),
f("ractive-edge"),
f("react-lite-v0.15.27"),
f("react-v15.4.0"),
f("react-v15.4.0-mobX-v2.6.3"),
f("react-v15.4.0-redux-v3.6.0"),
f("riot-v2.6.7"),
f("simulacra-v1.5.5"),
f("tsers-v1.0.0"),
f("vanillajs"),
f("vanillajs-keyed"),
f("vidom-v0.5.3"),
f("vue-v2.1.3")
f("angular-v1.5.8", false),
f("angular-v2.2.1", false),
f("aurelia-v1.0.7", true, {uri: "aurelia-v1.0.7/dist"}),
f("binding.scala-v10.0.1", false, {uri: "binding.scala-v10.0.1/target/web/stage"}),
f("bobril-v4.49.2", false),
f("cyclejs-dom-v14.1.0", true),
f("dio-v3.0.5", true),
f("domvm-v1.2.10", true),
f("domvm-v2.0.0-beta", false),
f("ember-v2.6.1", true, {uri: "ember-v2.6.1/dist"}), // TODO: Copy CSS and check
f("ember-v2.10.0-beta.2", true, {uri: "ember-v2.10.0-beta.2/dist"}),
f("elm-v0.18.0", false),
f("inferno-v1.0.0-beta9", true),
f("kivi-v1.0.0-rc2", false),
f("knockout-v3.4.1", false),
f("mithril-v0.2.5", false),
f("mithril-v1.0.0-alpha", false),
f("nx-v1.0.0-alpha.4.0.0", true),
f("plastiq-v1.33.0", false),
f("polymer-v1.7.0", false, {uri: "polymer-v1.7.0", useShadowRoot: true}),
f("preact-v6.4.0", false),
f("svelte-v1.0.1", true),
f("ractive-v0.8.5", false),
f("ractive-edge", false),
f("react-lite-v0.15.27", false),
f("react-v15.4.0", false),
f("react-v15.4.0-mobX-v2.6.3", false),
f("react-v15.4.0-redux-v3.6.0", false),
f("riot-v2.6.7", true),
f("simulacra-v1.5.5", false),
f("tsers-v1.0.0", true),
f("vanillajs", true),
// // f("vanillajs-nocss"),
// // f("vanillajs-slimcss"),
// // f("vanillajs-small-css"),
f("vanillajs-keyed", false),
f("vidom-v0.5.3", false),
f("vue-v2.1.3", false)
];
118 changes: 82 additions & 36 deletions webdriver-ts/src/createResultTable.ts
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,27 @@
import * as _ from 'lodash'
import * as fs from 'fs';
import {JSONResult, config} from './common'
import {JSONResult, config, frameworks, FrameworkData} from './common'
import {BenchmarkType, Benchmark, benchmarks} from './benchmarks'

const dots = require('dot').process({
path: './'
});

let frameworkMap = new Map<string, FrameworkData>();
frameworks.map(f => frameworkMap.set(f.name, f));

let results: Map<string, Map<string, JSONResult>> = new Map();
let frameworks: Array<string> = [];

fs.readdirSync('./results').filter(file => file.endsWith('.json')).forEach(name => {
let data = <JSONResult>JSON.parse(fs.readFileSync('./results/' + name, {
encoding:'utf-8'
}));

frameworks.push(data.framework);

if (!results.has(data.framework)) results.set(data.framework, new Map());
results.get(data.framework).set(data.benchmark, data);
});

frameworks = _.uniq(frameworks).sort((a,b) => {
if (a=='vanillajs') {
if (b=='vanillajs') return 0;
return 1;
} else if (b=='vanillajs') {
if (a=='vanillajs') return 0;
return -1;
if (!frameworkMap.has(data.framework)) {
console.log("WARN: No entry in commons.ts for "+data.framework+". Data will not appear in result table.");
} else {
if (a < b) return -1;
else if (a == b) return 0;
else return 1;
if (!results.has(data.framework)) results.set(data.framework, new Map());
results.get(data.framework).set(data.benchmark, data);
}
});

Expand All @@ -41,8 +31,6 @@ let cpuBenchmarkCount = cpuBenchmarks.length;

let getValue = (framework:string, benchmark:string) => results.has(framework) && results.get(framework).get(benchmark);

let factors = frameworks.map(f => 1.0);

function color(factor:number): string {
if (factor < 2.0) {
let a = (factor - 1.0);
Expand Down Expand Up @@ -78,14 +66,48 @@ class BenchResultList {
}
}

let generateBenchData = (benchmarks: Array<Benchmark>) => {
interface SearchFunc {
(source: string, subString: string): boolean;
}

interface FrameworkPredicate {
(framework: FrameworkData) : boolean;
}

let generateBenchData = (benchmarks: Array<Benchmark>, frameworkPredicate: FrameworkPredicate, referenceName: string) => {
let benches: Array<BenchResultList> = [];

let filteredFrameworks = frameworks.filter(f => frameworkPredicate(f)).slice();

let sortedFrameworks = filteredFrameworks.sort((a:FrameworkData,b:FrameworkData) => {
if (a.name==referenceName) {
if (b.name==referenceName) return 0;
console.log("found reference name", referenceName);
return 1;
} else if (b.name==referenceName) {
if (a.name==referenceName) return 0;
console.log("found reference name", referenceName);
return -1;
} else {
if (a.name < b.name) return -1;
else if (a.name == b.name) return 0;
else return 1;
}
});

let frameworkNames = sortedFrameworks.map(framework => framework.name.replace('-v', ' v'));
let factors = sortedFrameworks.map(f => 1.0);

console.log("frameworkNames", sortedFrameworks);

benchmarks.forEach((benchmark) => {
let bench = new BenchResultList(benchmark);

let values: Array<JSONResult> = [];
frameworks.forEach(framework => {
values.push(getValue(framework, benchmark.id));
sortedFrameworks.forEach(framework => {
if (frameworkPredicate(framework)) {
values.push(getValue(framework.name, benchmark.id));
}
});

let sorted = _.compact(values).map(data => {
Expand Down Expand Up @@ -126,24 +148,48 @@ let generateBenchData = (benchmarks: Array<Benchmark>) => {
}
});

benches.push(bench);
benches.push(bench);
});
return benches;
let geomMeans = factors.map(f => {
let value = Math.pow(f, 1 / cpuBenchmarkCount);
return {value: value.toPrecision(3), styleClass: color(value)}
});
return {
frameworks: frameworkNames,
benches,
geomMeans
}
}

let cpubenches = generateBenchData(cpuBenchmarks);
let membenches = generateBenchData(memBenchmarks);

let geomMeans = factors.map(f => {
let value = Math.pow(f, 1 / cpuBenchmarkCount);
return {value: value.toPrecision(3), styleClass: color(value)}
});
function frameworkPredicateKeyed(nonKeyed : boolean): FrameworkPredicate {
return (framework: FrameworkData) => {return framework.nonKeyed === nonKeyed;};
}
let cpubenchesNonKeyed = generateBenchData(cpuBenchmarks, frameworkPredicateKeyed(true), 'vanillajs');
let membenchesNonKeyed = generateBenchData(memBenchmarks, frameworkPredicateKeyed(true), 'vanillajs');
let cpubenchesKeyed = generateBenchData(cpuBenchmarks, frameworkPredicateKeyed(false), 'vanillajs-keyed'); // react
let membenchesKeyed = generateBenchData(memBenchmarks, frameworkPredicateKeyed(false), 'vanillajs-keyed');

fs.writeFileSync('./table.html', dots.table({
frameworks: frameworks.map(framework => framework.replace('-v', ' v')),
cpubenches,
membenches,
geomMeans
data: [
{
label: 'Keyed results',
description: `Keyed implementations create an association between the domain data and a dom element
by assigning a 'key'. If data changes the dom element with that key will be updated.
In consequence inserting or deleting an element in the data array causes a corresponding change to the dom.
`,
cpubenches: cpubenchesKeyed,
membenches: membenchesKeyed
},
{
label: 'Non keyed results',
description: `Non keyed implementations are allowed to reuse existing dom elements.
In consequence inserting or deleting an element in the data array might append after or delete the last table row
and update the contents of all elements after the inserting or deletion index.
This can perform better, but can cause problems if dom state is modified externally.
`,
cpubenches: cpubenchesNonKeyed,
membenches: membenchesNonKeyed
}]
}), {
encoding: 'utf8'
})
108 changes: 57 additions & 51 deletions webdriver-ts/table.dot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,64 +61,70 @@
</style>
</head>
<body class="markdown-body">
<h3>Duration in milliseconds (Slowdown = Duration / Fastest)</h3>
<table class="results">
<thead>
<tr>
<th class='benchname'></th>
{{~it.frameworks :value}}
<th>{{=value}}</th>
{{~}}
</tr>
</thead>
<tbody>
{{~it.cpubenches :bench}}
<p>Warning: These results are preliminary - use with caution (they may e.g. be from different browser versions).
Official results are published on my <a href="http://www.stefankrause.net/">blog</a>.</p>
{{~it.data :data}}
<h1>{{=data.label}}</h1>
<p>{{=data.description}}</p>
<h3>Duration in milliseconds (Slowdown = Duration / Fastest)</h3>
<table class="results">
<thead>
<tr>
<th class='benchname'>{{=bench.name}}
<div class="rowCount">{{=bench.description}}</div>
</th>
{{~bench.tests :test}}
{{?test}}
<td style="background-color:{{=test.styleClass}}"><span class="mean">{{=test.mean}}</span><span class="deviation">{{=test.deviation}}</span><br><span class="factor">({{=test.factor}})</span></td>
{{??}}
<td></td>
{{?}}
<th class='benchname'></th>
{{~data.cpubenches.frameworks :value}}
<th>{{=value}}</th>
{{~}}
</tr>
{{~}}
<tr>
<th>slowdown geometric mean</th>
{{~it.geomMeans :geomMean}}
<th style="background-color:{{=geomMean.styleClass}}">{{=geomMean.value}}
</th>
{{~}}
</tr>
</table>
<h3>Memory allocation in MBs</h3>
<table class="results">
<thead>
<tr>
<th class='benchname'></th>
{{~it.frameworks :value}}
<th>{{=value}}</th>
</thead>
<tbody>
{{~data.cpubenches.benches :bench}}
<tr>
<th class='benchname'>{{=bench.name}}
<div class="rowCount">{{=bench.description}}</div>
</th>
{{~bench.tests :test}}
{{?test}}
<td style="background-color:{{=test.styleClass}}"><span class="mean">{{=test.mean}}</span><span class="deviation">{{=test.deviation}}</span><br><span class="factor">({{=test.factor}})</span></td>
{{??}}
<td></td>
{{?}}
{{~}}
</tr>
{{~}}
</tr>
</thead>
<tbody>
{{~it.membenches :bench}}
<tr>
<th class='benchname'>{{=bench.name}}
<div class="rowCount">{{=bench.description}}</div>
</th>
{{~bench.tests :test}}
{{?test}}
<td style="background-color:{{=test.styleClass}}"><span class="mean">{{=test.mean}}</span><span class="deviation">{{=test.deviation}}</span><br><span class="factor">({{=test.factor}})</span></td>
{{??}}
<td></td>
{{?}}
<th>slowdown geometric mean</th>
{{~data.cpubenches.geomMeans :geomMean}}
<th style="background-color:{{=geomMean.styleClass}}">{{=geomMean.value}}
</th>
{{~}}
</tr>
</table>
<h3>Memory allocation in MBs</h3>
<table class="results">
<thead>
<tr>
<th class='benchname'></th>
{{~data.membenches.frameworks :value}}
<th>{{=value}}</th>
{{~}}
</tr>
</thead>
<tbody>
{{~data.membenches.benches :bench}}
<tr>
<th class='benchname'>{{=bench.name}}
<div class="rowCount">{{=bench.description}}</div>
</th>
{{~bench.tests :test}}
{{?test}}
<td style="background-color:{{=test.styleClass}}"><span class="mean">{{=test.mean}}</span><span class="deviation">{{=test.deviation}}</span><br><span class="factor">({{=test.factor}})</span></td>
{{??}}
<td></td>
{{?}}
{{~}}
</tr>
{{~}}
</table>
{{~}}
</table>
</body>
</html>
9 changes: 8 additions & 1 deletion webdriver-ts/table.html
View file

Large diffs are not rendered by default.

0 comments on commit 9a548fc

Please sign in to comment.