Skip to content

Commit bc8e517

Browse files
jeffbcrossjeffbcross
committed
feat(largeTable): add AngularJS 1.x largetable benchmark
1 parent dfcce3a commit bc8e517

File tree

8 files changed

+347
-0
lines changed

8 files changed

+347
-0
lines changed

‎modules/benchmarks_external/e2e_test/largetable_perf.es6‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var perfUtil = require('../../e2e_test_lib/e2e_test/perf_util');
2+
3+
describe('ng1.x largetable benchmark', function () {
4+
var URL = 'benchmarks_external/web/largetable/largetable_benchmark.html';
5+
6+
afterEach(perfUtil.verifyNoBrowserErrors);
7+
8+
[
9+
'baselineBinding',
10+
'baselineInterpolation',
11+
'ngBind',
12+
'ngBindOnce',
13+
'interpolation',
14+
'interpolationAttr',
15+
'ngBindFn',
16+
'interpolationFn',
17+
'ngBindFilter',
18+
'interpolationFilter'
19+
].forEach(function(benchmarkType) {
20+
it('should log the stats with: ' + benchmarkType, function() {
21+
perfUtil.runClickBenchmark({
22+
url: URL,
23+
buttons: ['#destroyDom', '#createDom'],
24+
id: 'ng1.largetable.' + benchmarkType,
25+
params: [{
26+
name: 'columns',
27+
value: 100
28+
},{
29+
name: 'rows',
30+
value: 20
31+
},{
32+
name: 'benchmarkType',
33+
value: benchmarkType
34+
}]
35+
});
36+
});
37+
});
38+
});

‎modules/benchmarks_external/e2e_test/largetable_spec.es6‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var testUtil = require('../../e2e_test_lib/e2e_test/test_util');
2+
3+
describe('ng1.x largetable benchmark', function () {
4+
var URL = 'benchmarks_external/web/largetable/largetable_benchmark.html';
5+
6+
afterEach(testUtil.verifyNoBrowserErrors);
7+
8+
[
9+
'baselineBinding',
10+
'baselineInterpolation',
11+
'ngBind',
12+
'ngBindOnce',
13+
'interpolation',
14+
'interpolationAttr',
15+
'ngBindFn',
16+
'interpolationFn',
17+
'ngBindFilter',
18+
'interpolationFilter'
19+
].forEach(function(benchmarkType) {
20+
it('should log the stats with: ' + benchmarkType, function() {
21+
browser.get(URL + '?benchmarkType='+benchmarkType);
22+
testUtil.clickAll(['#createDom', '#destroyDom']);
23+
});
24+
});
25+
});

‎modules/benchmarks_external/src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
<li>
99
<a href="tree/tree_benchmark.html">Tree benchmark</a>
1010
</li>
11+
<li>
12+
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
13+
</li>
1114
</ul>
1215
</body>
1316
</html>

‎modules/benchmarks_external/src/largetable/largetable-js-template.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<ng-switch on="benchmarkType">
2+
<baseline-binding-table ng-switch-when="baselineBinding">
3+
</baseline-binding-table>
4+
<baseline-interpolation-table ng-switch-when="baselineInterpolation">
5+
</baseline-interpolation-table>
6+
<div ng-switch-when="ngBind">
7+
<h2>baseline binding</h2>
8+
<div ng-repeat="row in data">
9+
<span ng-repeat="column in row">
10+
<span ng-bind="column.i"></span>:<span ng-bind="column.j"></span>|
11+
</span>
12+
</div>
13+
</div>
14+
<div ng-switch-when="ngBindOnce">
15+
<h2>baseline binding once</h2>
16+
<div ng-repeat="row in data">
17+
<span ng-repeat="column in ::row">
18+
<span ng-bind="::column.i"></span>:<span ng-bind="::column.j"></span>|
19+
</span>
20+
</div>
21+
</div>
22+
<div ng-switch-when="interpolation">
23+
<h2>baseline interpolation</h2>
24+
<div ng-repeat="row in data">
25+
<span ng-repeat="column in row">{{column.i}}:{{column.j}}|</span>
26+
</div>
27+
</div>
28+
<div ng-switch-when="interpolationAttr">
29+
<h2>attribute interpolation</h2>
30+
<div ng-repeat="row in data">
31+
<span ng-repeat="column in row" i="{{column.i}}" j="{{column.j}}">i,j attrs</span>
32+
</div>
33+
</div>
34+
<div ng-switch-when="ngBindFn">
35+
<h2>bindings with functions</h2>
36+
<div ng-repeat="row in data">
37+
<span ng-repeat="column in row"><span ng-bind="column.iFn()"></span>:<span ng-bind="column.jFn()"></span>|</span>
38+
</div>
39+
</div>
40+
<div ng-switch-when="interpolationFn">
41+
<h2>interpolation with functions</h2>
42+
<div ng-repeat="row in data">
43+
<span ng-repeat="column in row">{{column.iFn()}}:{{column.jFn()}}|</span>
44+
</div>
45+
</div>
46+
<div ng-switch-when="ngBindFilter">
47+
<h2>bindings with filter</h2>
48+
<div ng-repeat="row in data">
49+
<span ng-repeat="column in row"><span ng-bind="column.i | noop"></span>:<span ng-bind="column.j | noop"></span>|</span>
50+
</div>
51+
</div>
52+
<div ng-switch-when="interpolationFilter">
53+
<h2>interpolation with filter</h2>
54+
<div ng-repeat="row in data">
55+
<span ng-repeat="column in row">{{column.i | noop}}:{{column.j | noop}}|</span>
56+
</div>
57+
</div>
58+
</ng-switch>

‎modules/benchmarks_external/src/largetable/largetable_benchmark.es6‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import {getIntParameter, getStringParameter, bindAction} from 'e2e_test_lib/benchmark_util';
2+
3+
var totalRows = getIntParameter('rows');
4+
var totalColumns = getIntParameter('columns');
5+
var benchmarkType = getStringParameter('benchmarkType');
6+
7+
export function main() {
8+
angular.bootstrap(document.querySelector('largetable'), ['app']);
9+
}
10+
11+
angular.module('app', [])
12+
.config(function($compileProvider) {
13+
if ($compileProvider.debugInfoEnabled) {
14+
$compileProvider.debugInfoEnabled(false);
15+
}
16+
})
17+
.filter('noop', function() {
18+
return function(input) {
19+
return input;
20+
};
21+
})
22+
.directive('largetable', function() {
23+
return {
24+
restrict: 'E',
25+
templateUrl: 'largetable-js-template.html',
26+
controller: 'DataController'
27+
};
28+
})
29+
.controller('DataController', function($scope) {
30+
bindAction('#destroyDom', destroyDom);
31+
bindAction('#createDom', createDom);
32+
33+
function destroyDom() {
34+
$scope.$apply(function() {
35+
$scope.benchmarkType = 'none';
36+
});
37+
}
38+
39+
function createDom() {
40+
$scope.$apply(function() {
41+
$scope.benchmarkType = benchmarkType;
42+
});
43+
}
44+
45+
var data = $scope.data = [];
46+
47+
function iGetter() { return this.i; }
48+
function jGetter() { return this.j; }
49+
50+
for (var i=0; i<totalRows; i++) {
51+
data[i] = [];
52+
for (var j=0; j<totalColumns; j++) {
53+
data[i][j] = {
54+
i: i, j: j,
55+
iFn: iGetter,
56+
jFn: jGetter
57+
};
58+
}
59+
}
60+
})
61+
.directive('baselineBindingTable', function() {
62+
return {
63+
restrict: 'E',
64+
link: function ($scope, $element) {
65+
var i, j, row, cell, comment;
66+
var template = document.createElement('span');
67+
template.setAttribute('ng-repeat', 'foo in foos');
68+
template.classList.add('ng-scope');
69+
template.appendChild(document.createElement('span'));
70+
template.appendChild(document.createTextNode(':'));
71+
template.appendChild(document.createElement('span'));
72+
template.appendChild(document.createTextNode('|'));
73+
74+
for (i = 0; i < totalRows; i++) {
75+
row = document.createElement('div');
76+
$element[0].appendChild(row);
77+
for (j = 0; j < totalColumns; j++) {
78+
cell = template.cloneNode(true);
79+
row.appendChild(cell);
80+
cell.childNodes[0].textContent = i;
81+
cell.childNodes[2].textContent = j;
82+
cell.ng3992 = 'xxx';
83+
comment = document.createComment('ngRepeat end: bar in foo');
84+
row.appendChild(comment);
85+
}
86+
87+
comment = document.createComment('ngRepeat end: foo in foos');
88+
$element[0].appendChild(comment);
89+
}
90+
}
91+
};
92+
})
93+
.directive('baselineInterpolationTable', function() {
94+
return {
95+
restrict: 'E',
96+
link: function ($scope, $element) {
97+
var i, j, row, cell, comment;
98+
var template = document.createElement('span');
99+
template.setAttribute('ng-repeat', 'foo in foos');
100+
template.classList.add('ng-scope');
101+
102+
for (i = 0; i < totalRows; i++) {
103+
row = document.createElement('div');
104+
$element[0].appendChild(row);
105+
for (j = 0; j < totalColumns; j++) {
106+
cell = template.cloneNode(true);
107+
row.appendChild(cell);
108+
cell.textContent = '' + i + ':' + j + '|';
109+
cell.ng3992 = 'xxx';
110+
comment = document.createComment('ngRepeat end: bar in foo');
111+
row.appendChild(comment);
112+
}
113+
114+
comment = document.createComment('ngRepeat end: foo in foos');
115+
$element[0].appendChild(comment);
116+
}
117+
}
118+
};
119+
})

‎modules/benchmarks_external/src/largetable/largetable_benchmark.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!doctype html>
2+
<html>
3+
<body>
4+
5+
<h2>AngularJS/Dart 1.x largetable benchmark</h2>
6+
<form>
7+
<div>
8+
rows:
9+
<input type="number" name="rows" value="100">
10+
columns:
11+
<input type="number" name="columns" value="20">
12+
</div>
13+
<div>
14+
baseline binding:
15+
<input type="radio"
16+
name="benchmarkType"
17+
value="baselineBinding"
18+
id="baselineBinding"
19+
checked>
20+
</div>
21+
<div>
22+
baseline interpolation:
23+
<input type="radio"
24+
name="benchmarkType"
25+
value="baselineInterpolation"
26+
id="baselineInterpolation">
27+
</div>
28+
<div>
29+
ngBind:
30+
<input type="radio"
31+
name="benchmarkType"
32+
value="ngBind"
33+
id="ngBind">
34+
</div>
35+
<div>
36+
ngBindOnce:
37+
<input type="radio"
38+
name="benchmarkType"
39+
value="ngBindOnce"
40+
id="ngBindOnce">
41+
</div>
42+
<div>
43+
interpolation:
44+
<input type="radio"
45+
name="benchmarkType"
46+
value="interpolation"
47+
id="interpolation">
48+
</div>
49+
<div>
50+
attribute interpolation:
51+
<input type="radio"
52+
name="benchmarkType"
53+
value="interpolationAttr"
54+
id="interpolationAttr">
55+
</div>
56+
<div>
57+
ngBind + fnInvocation:
58+
<input type="radio"
59+
name="benchmarkType"
60+
value="ngBindFn"
61+
id="ngBindFn">
62+
</div>
63+
<div>
64+
interpolation + fnInvocation:
65+
<input type="radio"
66+
name="benchmarkType"
67+
value="interpolationFn"
68+
id="interpolationFn">
69+
</div>
70+
<div>
71+
ngBind + filter:
72+
<input type="radio"
73+
name="benchmarkType"
74+
value="ngBindFilter"
75+
id="ngBindFilter">
76+
</div>
77+
<div>
78+
interpolation + filter:
79+
<input type="radio"
80+
name="benchmarkType"
81+
value="interpolationFilter"
82+
id="interpolationFilter">
83+
</div>
84+
<button>Apply</button>
85+
</form>
86+
87+
<p>
88+
<button id="destroyDom">destroyDom</button>
89+
<button id="createDom">createDom</button>
90+
</p>
91+
92+
<div>
93+
<largetable></largetable>
94+
</div>
95+
96+
$SCRIPTS$
97+
</body>
98+
</html>

‎protractor-e2e-dart2js.conf.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
var config = exports.config = require('./protractor-e2e-shared.js').config;
22
config.baseUrl = 'http://localhost:8002/';
3+
// TODO: remove this line when largetable dart has been added
4+
config.exclude = config.exclude || [];
5+
config.exclude.push('dist/cjs/e2e_test/benchmarks_external/e2e_test/largetable_spec.js');
36

‎protractor-perf-dart2js.conf.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
var config = exports.config = require('./protractor-perf-shared.js').config;
22
config.params.lang = 'dart';
33
config.baseUrl = 'http://localhost:8002/';
4+
// TODO: remove this line when largetable dart has been added
5+
config.exclude = config.exclude || [];
6+
config.exclude.push('dist/cjs/e2e_test/benchmarks_external/e2e_test/largetable_perf.js');

0 commit comments

Comments
 (0)