feat(largeTable): add AngularJS 1.x largetable benchmark
This commit is contained in:
Jeff Cross
@ -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>
|
||||
Reference in New Issue
Block a user