feat(largeTable): add AngularJS 1.x largetable benchmark
This commit is contained in:
Jeff Cross
parent
dfcce3a789
commit
bc8e517ae2
|
|
@ -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
|
||||
}]
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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>
|
||||
<a href="tree/tree_benchmark.html">Tree benchmark</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</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;
|
||||
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;
|
||||
config.params.lang = 'dart';
|
||||
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…
Reference in New Issue