feat(largeTable): add AngularJS 1.x largetable benchmark
This commit is contained in:
Jeff Cross
parent
dfcce3a789
commit
bc8e517ae2
38
modules/benchmarks_external/e2e_test/largetable_perf.es6
Normal file
38
modules/benchmarks_external/e2e_test/largetable_perf.es6
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
var perfUtil = require('../../e2e_test_lib/e2e_test/perf_util');
|
||||||
|
|
||||||
|
describe('ng1.x largetable benchmark', function () {
|
||||||
|
var URL = 'benchmarks_external/web/largetable/largetable_benchmark.html';
|
||||||
|
|
||||||
|
afterEach(perfUtil.verifyNoBrowserErrors);
|
||||||
|
|
||||||
|
[
|
||||||
|
'baselineBinding',
|
||||||
|
'baselineInterpolation',
|
||||||
|
'ngBind',
|
||||||
|
'ngBindOnce',
|
||||||
|
'interpolation',
|
||||||
|
'interpolationAttr',
|
||||||
|
'ngBindFn',
|
||||||
|
'interpolationFn',
|
||||||
|
'ngBindFilter',
|
||||||
|
'interpolationFilter'
|
||||||
|
].forEach(function(benchmarkType) {
|
||||||
|
it('should log the stats with: ' + benchmarkType, function() {
|
||||||
|
perfUtil.runClickBenchmark({
|
||||||
|
url: URL,
|
||||||
|
buttons: ['#destroyDom', '#createDom'],
|
||||||
|
id: 'ng1.largetable.' + benchmarkType,
|
||||||
|
params: [{
|
||||||
|
name: 'columns',
|
||||||
|
value: 100
|
||||||
|
},{
|
||||||
|
name: 'rows',
|
||||||
|
value: 20
|
||||||
|
},{
|
||||||
|
name: 'benchmarkType',
|
||||||
|
value: benchmarkType
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
25
modules/benchmarks_external/e2e_test/largetable_spec.es6
Normal file
25
modules/benchmarks_external/e2e_test/largetable_spec.es6
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
var testUtil = require('../../e2e_test_lib/e2e_test/test_util');
|
||||||
|
|
||||||
|
describe('ng1.x largetable benchmark', function () {
|
||||||
|
var URL = 'benchmarks_external/web/largetable/largetable_benchmark.html';
|
||||||
|
|
||||||
|
afterEach(testUtil.verifyNoBrowserErrors);
|
||||||
|
|
||||||
|
[
|
||||||
|
'baselineBinding',
|
||||||
|
'baselineInterpolation',
|
||||||
|
'ngBind',
|
||||||
|
'ngBindOnce',
|
||||||
|
'interpolation',
|
||||||
|
'interpolationAttr',
|
||||||
|
'ngBindFn',
|
||||||
|
'interpolationFn',
|
||||||
|
'ngBindFilter',
|
||||||
|
'interpolationFilter'
|
||||||
|
].forEach(function(benchmarkType) {
|
||||||
|
it('should log the stats with: ' + benchmarkType, function() {
|
||||||
|
browser.get(URL + '?benchmarkType='+benchmarkType);
|
||||||
|
testUtil.clickAll(['#createDom', '#destroyDom']);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -8,6 +8,9 @@
|
|||||||
<li>
|
<li>
|
||||||
<a href="tree/tree_benchmark.html">Tree benchmark</a>
|
<a href="tree/tree_benchmark.html">Tree benchmark</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -0,0 +1,58 @@
|
|||||||
|
<ng-switch on="benchmarkType">
|
||||||
|
<baseline-binding-table ng-switch-when="baselineBinding">
|
||||||
|
</baseline-binding-table>
|
||||||
|
<baseline-interpolation-table ng-switch-when="baselineInterpolation">
|
||||||
|
</baseline-interpolation-table>
|
||||||
|
<div ng-switch-when="ngBind">
|
||||||
|
<h2>baseline binding</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in row">
|
||||||
|
<span ng-bind="column.i"></span>:<span ng-bind="column.j"></span>|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ng-switch-when="ngBindOnce">
|
||||||
|
<h2>baseline binding once</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in ::row">
|
||||||
|
<span ng-bind="::column.i"></span>:<span ng-bind="::column.j"></span>|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ng-switch-when="interpolation">
|
||||||
|
<h2>baseline interpolation</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in row">{{column.i}}:{{column.j}}|</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ng-switch-when="interpolationAttr">
|
||||||
|
<h2>attribute interpolation</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in row" i="{{column.i}}" j="{{column.j}}">i,j attrs</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ng-switch-when="ngBindFn">
|
||||||
|
<h2>bindings with functions</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in row"><span ng-bind="column.iFn()"></span>:<span ng-bind="column.jFn()"></span>|</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ng-switch-when="interpolationFn">
|
||||||
|
<h2>interpolation with functions</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in row">{{column.iFn()}}:{{column.jFn()}}|</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ng-switch-when="ngBindFilter">
|
||||||
|
<h2>bindings with filter</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in row"><span ng-bind="column.i | noop"></span>:<span ng-bind="column.j | noop"></span>|</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ng-switch-when="interpolationFilter">
|
||||||
|
<h2>interpolation with filter</h2>
|
||||||
|
<div ng-repeat="row in data">
|
||||||
|
<span ng-repeat="column in row">{{column.i | noop}}:{{column.j | noop}}|</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-switch>
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
import {getIntParameter, getStringParameter, bindAction} from 'e2e_test_lib/benchmark_util';
|
||||||
|
|
||||||
|
var totalRows = getIntParameter('rows');
|
||||||
|
var totalColumns = getIntParameter('columns');
|
||||||
|
var benchmarkType = getStringParameter('benchmarkType');
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
angular.bootstrap(document.querySelector('largetable'), ['app']);
|
||||||
|
}
|
||||||
|
|
||||||
|
angular.module('app', [])
|
||||||
|
.config(function($compileProvider) {
|
||||||
|
if ($compileProvider.debugInfoEnabled) {
|
||||||
|
$compileProvider.debugInfoEnabled(false);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.filter('noop', function() {
|
||||||
|
return function(input) {
|
||||||
|
return input;
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.directive('largetable', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
templateUrl: 'largetable-js-template.html',
|
||||||
|
controller: 'DataController'
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.controller('DataController', function($scope) {
|
||||||
|
bindAction('#destroyDom', destroyDom);
|
||||||
|
bindAction('#createDom', createDom);
|
||||||
|
|
||||||
|
function destroyDom() {
|
||||||
|
$scope.$apply(function() {
|
||||||
|
$scope.benchmarkType = 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDom() {
|
||||||
|
$scope.$apply(function() {
|
||||||
|
$scope.benchmarkType = benchmarkType;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var data = $scope.data = [];
|
||||||
|
|
||||||
|
function iGetter() { return this.i; }
|
||||||
|
function jGetter() { return this.j; }
|
||||||
|
|
||||||
|
for (var i=0; i<totalRows; i++) {
|
||||||
|
data[i] = [];
|
||||||
|
for (var j=0; j<totalColumns; j++) {
|
||||||
|
data[i][j] = {
|
||||||
|
i: i, j: j,
|
||||||
|
iFn: iGetter,
|
||||||
|
jFn: jGetter
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.directive('baselineBindingTable', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
link: function ($scope, $element) {
|
||||||
|
var i, j, row, cell, comment;
|
||||||
|
var template = document.createElement('span');
|
||||||
|
template.setAttribute('ng-repeat', 'foo in foos');
|
||||||
|
template.classList.add('ng-scope');
|
||||||
|
template.appendChild(document.createElement('span'));
|
||||||
|
template.appendChild(document.createTextNode(':'));
|
||||||
|
template.appendChild(document.createElement('span'));
|
||||||
|
template.appendChild(document.createTextNode('|'));
|
||||||
|
|
||||||
|
for (i = 0; i < totalRows; i++) {
|
||||||
|
row = document.createElement('div');
|
||||||
|
$element[0].appendChild(row);
|
||||||
|
for (j = 0; j < totalColumns; j++) {
|
||||||
|
cell = template.cloneNode(true);
|
||||||
|
row.appendChild(cell);
|
||||||
|
cell.childNodes[0].textContent = i;
|
||||||
|
cell.childNodes[2].textContent = j;
|
||||||
|
cell.ng3992 = 'xxx';
|
||||||
|
comment = document.createComment('ngRepeat end: bar in foo');
|
||||||
|
row.appendChild(comment);
|
||||||
|
}
|
||||||
|
|
||||||
|
comment = document.createComment('ngRepeat end: foo in foos');
|
||||||
|
$element[0].appendChild(comment);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.directive('baselineInterpolationTable', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
link: function ($scope, $element) {
|
||||||
|
var i, j, row, cell, comment;
|
||||||
|
var template = document.createElement('span');
|
||||||
|
template.setAttribute('ng-repeat', 'foo in foos');
|
||||||
|
template.classList.add('ng-scope');
|
||||||
|
|
||||||
|
for (i = 0; i < totalRows; i++) {
|
||||||
|
row = document.createElement('div');
|
||||||
|
$element[0].appendChild(row);
|
||||||
|
for (j = 0; j < totalColumns; j++) {
|
||||||
|
cell = template.cloneNode(true);
|
||||||
|
row.appendChild(cell);
|
||||||
|
cell.textContent = '' + i + ':' + j + '|';
|
||||||
|
cell.ng3992 = 'xxx';
|
||||||
|
comment = document.createComment('ngRepeat end: bar in foo');
|
||||||
|
row.appendChild(comment);
|
||||||
|
}
|
||||||
|
|
||||||
|
comment = document.createComment('ngRepeat end: foo in foos');
|
||||||
|
$element[0].appendChild(comment);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>AngularJS/Dart 1.x largetable benchmark</h2>
|
||||||
|
<form>
|
||||||
|
<div>
|
||||||
|
rows:
|
||||||
|
<input type="number" name="rows" value="100">
|
||||||
|
columns:
|
||||||
|
<input type="number" name="columns" value="20">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
baseline binding:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="baselineBinding"
|
||||||
|
id="baselineBinding"
|
||||||
|
checked>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
baseline interpolation:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="baselineInterpolation"
|
||||||
|
id="baselineInterpolation">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
ngBind:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="ngBind"
|
||||||
|
id="ngBind">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
ngBindOnce:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="ngBindOnce"
|
||||||
|
id="ngBindOnce">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
interpolation:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="interpolation"
|
||||||
|
id="interpolation">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
attribute interpolation:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="interpolationAttr"
|
||||||
|
id="interpolationAttr">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
ngBind + fnInvocation:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="ngBindFn"
|
||||||
|
id="ngBindFn">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
interpolation + fnInvocation:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="interpolationFn"
|
||||||
|
id="interpolationFn">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
ngBind + filter:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="ngBindFilter"
|
||||||
|
id="ngBindFilter">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
interpolation + filter:
|
||||||
|
<input type="radio"
|
||||||
|
name="benchmarkType"
|
||||||
|
value="interpolationFilter"
|
||||||
|
id="interpolationFilter">
|
||||||
|
</div>
|
||||||
|
<button>Apply</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button id="destroyDom">destroyDom</button>
|
||||||
|
<button id="createDom">createDom</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<largetable></largetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
$SCRIPTS$
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,3 +1,6 @@
|
|||||||
var config = exports.config = require('./protractor-e2e-shared.js').config;
|
var config = exports.config = require('./protractor-e2e-shared.js').config;
|
||||||
config.baseUrl = 'http://localhost:8002/';
|
config.baseUrl = 'http://localhost:8002/';
|
||||||
|
// TODO: remove this line when largetable dart has been added
|
||||||
|
config.exclude = config.exclude || [];
|
||||||
|
config.exclude.push('dist/cjs/e2e_test/benchmarks_external/e2e_test/largetable_spec.js');
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
var config = exports.config = require('./protractor-perf-shared.js').config;
|
var config = exports.config = require('./protractor-perf-shared.js').config;
|
||||||
config.params.lang = 'dart';
|
config.params.lang = 'dart';
|
||||||
config.baseUrl = 'http://localhost:8002/';
|
config.baseUrl = 'http://localhost:8002/';
|
||||||
|
// TODO: remove this line when largetable dart has been added
|
||||||
|
config.exclude = config.exclude || [];
|
||||||
|
config.exclude.push('dist/cjs/e2e_test/benchmarks_external/e2e_test/largetable_perf.js');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user