Skip to content

Commit 9575ac7

Browse files
krausestkrausest
committed
update results for chrome 69 for all frameworks, new feature: show variance, update to lighthouse 3
1 parent 1e850b6 commit 9575ac7

File tree

8 files changed

+1883
-1800
lines changed

8 files changed

+1883
-1800
lines changed

‎webdriver-ts-results/src/App.tsx

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ interface State {
2424
sortKey: string;
2525
compareWith: Framework | undefined;
2626
useMedian: boolean;
27+
highlightVariance: boolean;
2728
}
2829

2930
let allBenchmarks = () => benchmarks.reduce((set, b) => set.add(b), new Set() );
@@ -36,14 +37,14 @@ let resultLookup = convertToMap(results);
3637

3738
class App extends React.Component<{}, State> {
3839
benchSelect = (benchmarkType: BenchmarkType) => ({
39-
selectAll: (event: React.SyntheticEvent<any>) => {
40+
selectAll: (event: React.SyntheticEvent<any>) => {
4041
event.preventDefault();
4142
let set = this.state.selectedBenchmarks;
4243
benchmarks.forEach(b => {if (b.type === benchmarkType) set.add(b);});
4344
this.nextState.selectedBenchmarks = set;
4445
this.setState({selectedBenchmarks: set, resultTables: this.updateResultTable()});
4546
},
46-
selectNone: (event: React.SyntheticEvent<any>) => {
47+
selectNone: (event: React.SyntheticEvent<any>) => {
4748
event.preventDefault();
4849
let set = this.state.selectedBenchmarks;
4950
benchmarks.forEach(b => {if (b.type === benchmarkType) set.delete(b);});
@@ -58,14 +59,14 @@ class App extends React.Component<{}, State> {
5859
isSelected: (benchmark: Benchmark) => this.state.selectedBenchmarks.has(benchmark)
5960
})
6061
frameworkSelect = (keyed: boolean) => ({
61-
selectAll: (event: React.SyntheticEvent<any>) => {
62+
selectAll: (event: React.SyntheticEvent<any>) => {
6263
event.preventDefault();
6364
let set = this.state.selectedFrameworks;
6465
frameworks.forEach(framework => {if (framework.keyed === keyed && !set.has(framework)) set.add(framework);});
6566
this.nextState.selectedFrameworks = set;
6667
this.setState({selectedFrameworks: set, resultTables: this.updateResultTable()});
6768
},
68-
selectNone: (event: React.SyntheticEvent<any>) => {
69+
selectNone: (event: React.SyntheticEvent<any>) => {
6970
event.preventDefault();
7071
let set = this.state.selectedFrameworks;
7172
set.forEach(framework => {if (framework.keyed === keyed) set.delete(framework);});
@@ -85,7 +86,7 @@ class App extends React.Component<{}, State> {
8586

8687
constructor(props: object) {
8788
super(props);
88-
this.nextState = {benchmarks,
89+
this.nextState = {benchmarks,
8990
benchmarksCPU: benchmarks.filter(b => b.type === BenchmarkType.CPU),
9091
benchmarksStartup: benchmarks.filter(b => b.type === BenchmarkType.STARTUP),
9192
benchmarksMEM: benchmarks.filter(b => b.type === BenchmarkType.MEM),
@@ -99,6 +100,7 @@ class App extends React.Component<{}, State> {
99100
sortKey: SORT_BY_GEOMMEAN,
100101
compareWith: undefined,
101102
useMedian: false,
103+
highlightVariance: false
102104
};
103105
this.nextState.resultTables = this.updateResultTable();
104106
this.state = this.nextState;
@@ -122,7 +124,7 @@ class App extends React.Component<{}, State> {
122124
else set.add(framework);
123125
this.nextState.selectedFrameworks = set;
124126
this.setState({selectedFrameworks: set, resultTables: this.updateResultTable()});
125-
}
127+
}
126128
selectSeparateKeyedAndNonKeyed = (value: boolean): void => {
127129
this.nextState.separateKeyedAndNonKeyed = value;
128130
this.setState({separateKeyedAndNonKeyed: value, resultTables: this.updateResultTable()});
@@ -131,12 +133,16 @@ class App extends React.Component<{}, State> {
131133
this.nextState.useMedian = value;
132134
this.setState({useMedian: value, resultTables: this.updateResultTable()});
133135
}
136+
selectHighlightVariance = (value: boolean): void => {
137+
this.nextState.highlightVariance = value;
138+
this.setState({highlightVariance: value, resultTables: this.updateResultTable()});
139+
}
134140
updateResultTable() {
135141
if (this.nextState.separateKeyedAndNonKeyed) {
136-
return [new ResultTableData(frameworks, benchmarks, resultLookup, this.nextState.selectedFrameworks, this.nextState.selectedBenchmarks, false, this.nextState.sortKey, this.nextState.compareWith, this.nextState.useMedian),
137-
new ResultTableData(frameworks, benchmarks, resultLookup, this.nextState.selectedFrameworks, this.nextState.selectedBenchmarks, true, this.nextState.sortKey, this.nextState.compareWith, this.nextState.useMedian)]
142+
return [new ResultTableData(frameworks, benchmarks, resultLookup, this.nextState.selectedFrameworks, this.nextState.selectedBenchmarks, false, this.nextState.sortKey, this.nextState.compareWith, this.nextState.useMedian, this.nextState.highlightVariance),
143+
new ResultTableData(frameworks, benchmarks, resultLookup, this.nextState.selectedFrameworks, this.nextState.selectedBenchmarks, true, this.nextState.sortKey, this.nextState.compareWith, this.nextState.useMedian, this.nextState.highlightVariance)]
138144
} else {
139-
return [new ResultTableData(frameworks, benchmarks, resultLookup, this.nextState.selectedFrameworks, this.nextState.selectedBenchmarks, undefined, this.nextState.sortKey, this.nextState.compareWith, this.nextState.useMedian)]
145+
return [new ResultTableData(frameworks, benchmarks, resultLookup, this.nextState.selectedFrameworks, this.nextState.selectedBenchmarks, undefined, this.nextState.sortKey, this.nextState.compareWith, this.nextState.useMedian, this.nextState.highlightVariance)]
140146
}
141147
}
142148
selectComparison = (framework: string): void => {
@@ -157,19 +163,19 @@ class App extends React.Component<{}, State> {
157163
render() {
158164
let disclaimer = (false) ? (<div>
159165
<h2>Results for js web frameworks benchmark – round 7</h2>
160-
<p>Go here for the accompanying article <a href="http://www.stefankrause.net/wp/?p=454">http://www.stefankrause.net/wp/?p=454</a>. Source code can be found in the github <a href="https://github.com/krausest/js-framework-benchmark">repository</a>.</p>
166+
<p>Go here for the accompanying article <a href="http://www.stefankrause.net/wp/?p=454">http://www.stefankrause.net/wp/?p=454</a>. Source code can be found in the github <a href="https://github.com/krausest/js-framework-benchmark">repository</a>.</p>
161167
</div>) :
162168
(<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>);
163169

164170
return (
165-
<div>
171+
<div>
166172
{disclaimer}
167-
<p>The benchmark was run on a MacBook Pro 15 (2,5 GHz i7, 16 GB RAM, OSX 10.13.1, Chrome 62.0.3202.94 (64-bit))</p>
168-
<SelectBar benchmarksCPU={this.state.benchmarksCPU}
173+
<p>The benchmark was run on a MacBook Pro 15 (2,5 GHz i7, 16 GB RAM, OSX 10.13.1, Chrome 62.0.3202.94 (64-bit))</p>
174+
<SelectBar benchmarksCPU={this.state.benchmarksCPU}
169175
benchmarksStartup={this.state.benchmarksStartup}
170-
benchmarksMEM={this.state.benchmarksMEM}
171-
frameworksKeyed={this.state.frameworksKeyed}
172-
frameworksNonKeyed={this.state.frameworksNonKeyed}
176+
benchmarksMEM={this.state.benchmarksMEM}
177+
frameworksKeyed={this.state.frameworksKeyed}
178+
frameworksNonKeyed={this.state.frameworksNonKeyed}
173179
frameworkSelectKeyed={this.frameworkSelectKeyed}
174180
frameworkSelectNonKeyed={this.frameworkSelectNonKeyed}
175181
benchSelectCpu={this.benchSelectCpu}
@@ -183,10 +189,12 @@ class App extends React.Component<{}, State> {
183189
selectComparison={this.selectComparison}
184190
useMedian={this.state.useMedian}
185191
selectMedian={this.selectMedian}
192+
highlightVariance={this.state.highlightVariance}
193+
selectHighlightVariance={this.selectHighlightVariance}
186194
/>
187-
{!this.state.compareWith ? null :
188-
(<p style={{marginTop:'10px'}}>In comparison mode white cells mean there's no statistically significant difference.
189-
Green cells are significantly faster than the comparison and red cells are slower.
195+
{!this.state.compareWith ? null :
196+
(<p style={{marginTop:'10px'}}>In comparison mode white cells mean there's no statistically significant difference.
197+
Green cells are significantly faster than the comparison and red cells are slower.
190198
The test is performed as a one sided t-test. The significance level is 10%. The darker the color the lower the p-Value.</p>
191199
)}
192200
<ResultTable currentSortKey={this.state.sortKey} data={this.state.resultTables} separateKeyedAndNonKeyed={this.state.separateKeyedAndNonKeyed} sortBy={this.sortBy}/>

‎webdriver-ts-results/src/Common.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,16 @@ let computeColor = function(factor: number): string {
6161
}
6262

6363
export class TableResultValueEntry implements TableResultEntry {
64-
color: string;
65-
constructor(public key:string, public mean: number, public standardDeviation: number, public factor: number, public statisticallySignificantFactor: string|number|undefined, public statisticalCol: [string,string]|undefined) {
66-
this.color = computeColor(factor);
64+
constructor(public key:string, public mean: number, public standardDeviation: number, public factor: number, public formattedFactor: string, public bgColor: string, public textColor: string, public statisticallySignificantFactor: string|number|undefined = undefined) {
6765
}
6866
render() {
69-
let col = this.statisticalCol === undefined ? this.color : this.statisticalCol[0];
70-
let textCol = this.statisticalCol === undefined ? '#000' : this.statisticalCol[1];
67+
let col = this.bgColor;
68+
let textCol = this.textColor;
7169
return (<td key={this.key} style={{backgroundColor:col, color: textCol}}>
7270
<span className="mean">{this.mean.toLocaleString('en-US', {minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: true})}</span>
7371
<span className="deviation">{this.standardDeviation.toFixed(1)}</span>
7472
<br />
75-
<span className="factor">({this.factor.toFixed(1)})</span>
73+
<span className="factor">({this.formattedFactor})</span>
7674
<br/>
7775
<span className="factor">{this.statisticallySignificantFactor}</span>
7876
</td>);
@@ -143,7 +141,8 @@ export class ResultTableData {
143141
constructor(public allFrameworks: Array<Framework>, public allBenchmarks: Array<Benchmark>, public results: ResultLookup,
144142
public selectedFrameworks: Set<Framework>, public selectedBenchmarks: Set<Benchmark>, nonKeyed: boolean|undefined, sortKey: string,
145143
public compareWith: Framework|undefined,
146-
public useMedian: boolean) {
144+
public useMedian: boolean,
145+
public highlightVariance: boolean) {
147146
this.frameworks = this.allFrameworks.filter(framework => (nonKeyed===undefined || framework.keyed !== nonKeyed) && selectedFrameworks.has(framework));
148147
this.update(sortKey);
149148
}
@@ -221,7 +220,7 @@ export class ResultTableData {
221220
let gMean = resultsCPUForFramework.reduce((gMean, r) => {
222221
if (r !== null) {
223222
count++;
224-
gMean *= r.factor;
223+
gMean *= (r.factor as number);
225224
}
226225
return gMean;
227226
}, 1.0);
@@ -240,11 +239,11 @@ export class ResultTableData {
240239
let factor = clamp ? Math.max(16, mean) / Math.max(16, min) : mean/min;
241240
let standardDeviation = result.standardDeviation;
242241

243-
let statisticalResult = undefined;
244-
let statisticalCol = undefined;
245242
// X1,..,Xn: this Framework, Y1, ..., Ym: selected Framework
246243
// https://de.wikipedia.org/wiki/Zweistichproben-t-Test
247244
if (compareWithResults) {
245+
let statisticalResult = undefined;
246+
let statisticalCol = undefined;
248247
let compareWithMean = compareWithResults.mean;
249248
let stdDev = result.standardDeviation || 0;
250249
let compareWithResultsStdDev = compareWithResults.standardDeviation || 0;
@@ -261,8 +260,14 @@ export class ResultTableData {
261260
let p = (1.0-jStat.studentt.cdf( Math.abs(t), ny ))*2;
262261
statisticalCol = statisticComputeColor(t, p);
263262
statisticalResult = (p*100).toFixed(3)+"%";
263+
return new TableResultValueEntry(f.name, mean, standardDeviation || 0, factor, factor.toFixed(1), statisticalCol[0], statisticalCol[1], statisticalResult);
264+
} else if (this.highlightVariance) {
265+
let stdDev = result.standardDeviation || 0;
266+
let stdDevFactor = stdDev/result.mean * 100.0;
267+
return new TableResultValueEntry(f.name, mean, standardDeviation || 0, factor, stdDevFactor.toFixed(2) + "%", computeColor(stdDevFactor/5.0 + 1.0), '0x000');
268+
} else {
269+
return new TableResultValueEntry(f.name, mean, standardDeviation || 0, factor, factor.toFixed(1), computeColor(factor), '0x000');
264270
}
265-
return new TableResultValueEntry(f.name, mean, standardDeviation || 0, factor, statisticalResult, statisticalCol);
266271
}
267272
});
268273
}

‎webdriver-ts-results/src/SelectBar.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export interface Props {
2525
selectComparison: (framework: string) => void;
2626
useMedian: boolean;
2727
selectMedian: (value: boolean) => void;
28+
highlightVariance: boolean;
29+
selectHighlightVariance: (value: boolean) => void;
2830
}
2931

3032
const SelectCategory = ({benchmarks, select, benchSelect, label} :
@@ -58,7 +60,9 @@ export class SelectBar extends React.Component<Props, {}> {
5860
compareWith,
5961
selectComparison,
6062
useMedian,
61-
selectMedian
63+
selectMedian,
64+
highlightVariance,
65+
selectHighlightVariance
6266
} = this.props;
6367
return (
6468
<div>
@@ -95,7 +99,7 @@ export class SelectBar extends React.Component<Props, {}> {
9599
<div className="form-group">
96100
<div className="hspan"/>
97101
<select className="form-control" value={compareWith ? compareWith.name : ''} onChange={(evt) => selectComparison(evt.target.value)}>
98-
<option value=''>Compare with ...</option>
102+
<option value=''>Compare with ...</option>
99103
<optgroup label="Keyed">
100104
{ frameworksKeyed.map(f => <option key={f.name} value={f.name}>{f.name}</option>) }
101105
</optgroup>
@@ -112,6 +116,13 @@ export class SelectBar extends React.Component<Props, {}> {
112116
Use median instead of mean
113117
</label>
114118
</div>
119+
<div className="hspan"/>
120+
<div className="checkbox" style={{display:"inline-block"}}>
121+
<label>
122+
<input type="checkbox" onChange={(evt) => selectHighlightVariance(evt.target.checked)} checked={highlightVariance} />
123+
Highlight variance
124+
</label>
125+
</div>
115126
</div>
116127
</div>
117128
);

0 commit comments

Comments
 (0)