test(orderBy): implement benchmark for ngRepeat with orderBy

This commit is contained in:
Leonardo Zizzamia
2014-08-27 19:50:17 -07:00
committed by Jeff Cross
parent 44cf2e1904
commit d9cdb105fc
3 changed files with 140 additions and 0 deletions

View File

@@ -0,0 +1,48 @@
var app = angular.module('orderByBenchmark', []);
app.controller('DataController', function($rootScope, $scope) {
this.ngRepeatCount = 5000;
this.rows = [];
var self = this;
$scope.benchmarkType = 'basic';
$scope.rawProperty = function(key) {
return function(item) {
return item[key];
};
};
// Returns a random integer between min (included) and max (excluded)
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
benchmarkSteps.push({
name: 'setup',
description: 'Set rows to empty array and apply, then push new rows to be applied in next step',
fn: function() {
var oldRows = self.rows;
$rootScope.$apply(function() {
self.rows = [];
});
self.rows = oldRows;
if (self.rows.length !== self.ngRepeatCount) {
self.rows = [];
for (var i = 0; i < self.ngRepeatCount; i++) {
self.rows.push({
'name': getRandomInt(i, (i + 40)),
'index': i
});
}
}
}
})
benchmarkSteps.push({
name: '$apply',
fn: function() {
$rootScope.$apply();
}
});
});

View File

@@ -0,0 +1,10 @@
module.exports = function(config) {
config.set({
scripts: [{
id: 'angular',
src: '/build/angular.js'
},{
src: 'app.js',
}]
});
};

View File

@@ -0,0 +1,82 @@
<div class="container-fluid" ng-app="filtersBenchmark">
<div class="row" ng-controller="DataController as ctrl">
<div class="col-lg-8">
<p>Filters</p>
<p>
<label>Number of ngRepeats:</label>
<input type="number" ng-model="ctrl.ngRepeatCount">
</p>
<p>
<div class="radio">
<label>
<input type="radio" ng-model="benchmarkType" value="baseline">baseline
</label>
</div>
<pre><code>ng-repeat="row in ctrl.rows"</code></pre>
<br />
<div class="radio">
<label>
<input type="radio" ng-model="benchmarkType" value="orderBy">orderBy
</label>
</div>
<pre><code>ng-repeat="row in ctrl.rows | orderBy:'name'"</code></pre>
<br />
<div class="radio">
<label>
<input type="radio" ng-model="benchmarkType" value="orderByArray">orderBy array expression
</label>
</div>
<pre><code>ng-repeat="row in ctrl.rows | orderBy:['name', 'index']"</code></pre>
<br />
<div class="radio">
<label>
<input type="radio" ng-model="benchmarkType"
value="orderByFunction">orderBy function expression
</label>
</div>
<pre><code>ng-repeat="row in ctrl.rows | orderBy:rawProperty('name')"</code></pre>
<br />
<div class="radio">
<label>
<input type="radio" ng-model="benchmarkType"
value="orderByArrayFunction">orderBy array function expression
</label>
</div>
<pre><code>ng-repeat="row in ctrl.rows | orderBy:[rawProperty('name'), rawProperty('index')]"</code></pre>
</p>
Debug output:
<ng-switch on="benchmarkType">
<div ng-switch-when="baseline">
<span ng-repeat="row in ctrl.rows">
<span ng-bind="row.name"></span>,
</span>
</div>
<div ng-switch-when="orderBy">
<span ng-repeat="row in ctrl.rows | orderBy:'name'">
<span ng-bind="row.name"></span>,
</span>
</div>
<div ng-switch-when="orderByArray">
<span ng-repeat="row in ctrl.rows | orderBy:['name', 'index']">
<span ng-bind="row.name"></span>,
</span>
</div>
<div ng-switch-when="orderByFunction">
<span ng-repeat="row in ctrl.rows | orderBy:rawProperty('name')">
<span ng-bind="row.name"></span>,
</span>
</div>
<div ng-switch-when="orderByArrayFunction">
<span ng-repeat="row in ctrl.rows | orderBy:[rawProperty('name'), rawProperty('index')]">
<span ng-bind="row.name"></span>,
</span>
</div>
</ng-switch>
</div>
</div>
</div>