Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit d095a0c

Browse files
drpicoxdrpicox
committed
chore(benchpress): add a ngClass benchmark
1 parent 138fbf0 commit d095a0c

File tree

3 files changed

+250
-0
lines changed

3 files changed

+250
-0
lines changed

‎benchmarks/ng-class-bp/app.js

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
'use strict';
2+
3+
var app = angular.module('ngClassBenchmark', []);
4+
5+
app.controller('DataController', function DataController($scope) {
6+
7+
this.numberOfTodos = 1000;
8+
this.implementation = 'tableOptimized';
9+
this.completedPeriodicity = 3;
10+
this.importantPeriodicity = 13;
11+
this.urgentPeriodicity = 29;
12+
this.todos = buildTodos(100);
13+
configureTodos(this.todos, 0, this);
14+
15+
benchmarkSteps.push({
16+
name: 'setup',
17+
fn: function() {
18+
this.todos = [];
19+
$scope.$apply();
20+
this.todos = buildTodos(this.numberOfTodos);
21+
}.bind(this)
22+
});
23+
24+
benchmarkSteps.push({
25+
name: 'create',
26+
fn: function() {
27+
// initialize data for first time that will construct the DOM
28+
configureTodos(this.todos, 0, this);
29+
$scope.$apply();
30+
}.bind(this)
31+
});
32+
33+
benchmarkSteps.push({
34+
name: '$apply',
35+
fn: function() {
36+
$scope.$apply();
37+
}
38+
});
39+
40+
benchmarkSteps.push({
41+
name: 'update',
42+
fn: function() {
43+
// move everything but completed
44+
configureTodos(this.todos, 3, this);
45+
$scope.$apply();
46+
}.bind(this)
47+
});
48+
49+
benchmarkSteps.push({
50+
name: 'unclass',
51+
fn: function() {
52+
// remove all classes
53+
configureTodos(this.todos, NaN, this);
54+
$scope.$apply();
55+
}.bind(this)
56+
});
57+
58+
benchmarkSteps.push({
59+
name: 'class',
60+
fn: function() {
61+
// add all classes as the initial state
62+
configureTodos(this.todos, 0, this);
63+
$scope.$apply();
64+
}.bind(this)
65+
});
66+
67+
benchmarkSteps.push({
68+
name: 'destroy',
69+
fn: function() {
70+
this.todos.length = 0;
71+
$scope.$apply();
72+
}.bind(this)
73+
});
74+
75+
function buildTodos(count) {
76+
var todos = [];
77+
var i;
78+
for (i = 0; i < count; i++) {
79+
todos.push({
80+
id: i + 1,
81+
completed: false,
82+
important: false,
83+
urgent: false
84+
});
85+
}
86+
return todos;
87+
}
88+
89+
function configureTodos(todos, offset, config) {
90+
var i, todo;
91+
for (i = 0; i < todos.length; i++) {
92+
todo = todos[i];
93+
todo.completed = 0 === (i + offset) % config.completedPeriodicity;
94+
todo.important = 0 === (i + offset) % config.importantPeriodicity;
95+
todo.urgent = 0 === (i + offset) % config.urgentPeriodicity;
96+
}
97+
}
98+
99+
});

‎benchmarks/ng-class-bp/bp.conf.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* eslint-env node */
2+
3+
'use strict';
4+
5+
module.exports = function(config) {
6+
config.set({
7+
scripts: [{
8+
id: 'angular',
9+
src: '/build/angular.js'
10+
},
11+
{
12+
src: 'app.js'
13+
}]
14+
});
15+
};

‎benchmarks/ng-class-bp/main.html

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<style>
2+
.gold {
3+
background: gold;
4+
}
5+
.silver {
6+
background: silver;
7+
}
8+
.table tbody tr > td.success {
9+
background-color: #dff0d8;
10+
}
11+
12+
.table tbody tr > td.error {
13+
background-color: #f2dede;
14+
}
15+
16+
.table tbody tr > td.warning {
17+
background-color: #fcf8e3;
18+
}
19+
20+
.table tbody tr > td.info {
21+
background-color: #d9edf7;
22+
}
23+
.completed {
24+
text-decoration: line-through;
25+
}
26+
.important {
27+
font-weight: bold;
28+
}
29+
.urgent {
30+
color: red;
31+
}
32+
</style>
33+
<div ng-app="ngClassBenchmark" ng-cloak>
34+
<div ng-controller="DataController as benchmark">
35+
<h3>Parameters</h3>
36+
<p>
37+
<label>Number of todos</label><br>
38+
<input type="number" ng-model="benchmark.numberOfTodos">
39+
</p>
40+
<p>
41+
Implementation:<br>
42+
<label>
43+
<input type="radio" ng-model="benchmark.implementation" value="tableOptimized">
44+
Table optimized <code>ng-class="'success' && todo.completed"</code>
45+
</label><br>
46+
<label>
47+
<input type="radio" ng-model="benchmark.implementation" value="table">
48+
Table <code>ng-class="{success: todo.completed}"</code>
49+
</label><br>
50+
<label>
51+
<input type="radio" ng-model="benchmark.implementation" value="list">
52+
Table <code>ng-class="{completed: todo.completed, urgent: todo.urgent, important: todo.important"}</code>
53+
</label><br>
54+
<label>
55+
<input type="radio" ng-model="benchmark.implementation" value="singleOptimized">
56+
Single ngClass Optimized <code>ng-class="{'panel-success': !!benchmark.todos, 'panel-error': !benchmark.todos}"</code>
57+
</label><br>
58+
<label>
59+
<input type="radio" ng-model="benchmark.implementation" value="single">
60+
Single ngClass <code>ng-class="{'panel-success': benchmark.todos, 'panel-error': !benchmark.todos}"</code>
61+
</label><br>
62+
63+
</p>
64+
65+
<br>
66+
<h3>Example</h3>
67+
<div ng-switch="benchmark.implementation">
68+
<table ng-switch-when="tableOptimized" class="table">
69+
<thead>
70+
<tr>
71+
<th>todo #id</th>
72+
<th>completed?</th>
73+
<th>urgent?</th>
74+
<th>important?</th>
75+
</tr>
76+
</thead>
77+
<tbody>
78+
<tr ng-repeat="todo in benchmark.todos track by todo.id"
79+
ng-class="todo.completed && 'active'"
80+
ng-class-even="todo.completed && todo.important && 'gold'"
81+
ng-class-odd="todo.completed && todo.important && 'silver'"
82+
>
83+
<td>#{{todo.id}}</td>
84+
<td>{{todo.completed}}</td>
85+
<td ng-class="todo.urgent && 'danger'">{{todo.urgent}}</td>
86+
<td ng-class="todo.important && 'success'">{{todo.important}}</td>
87+
</tr>
88+
</tbody>
89+
</table>
90+
<table ng-switch-when="table" class="table">
91+
<thead>
92+
<tr>
93+
<th>todo #id</th>
94+
<th>completed?</th>
95+
<th>urgent?</th>
96+
<th>important?</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
<tr ng-repeat="todo in benchmark.todos track by todo.id"
101+
ng-class="{active: todo.completed}"
102+
ng-class-even="{gold: todo.completed && todo.important}"
103+
ng-class-odd="{silver: todo.completed && todo.important}"
104+
>
105+
<td>#{{todo.id}}</td>
106+
<td>{{todo.completed}}</td>
107+
<td ng-class="{danger: todo.urgent}">{{todo.urgent}}</td>
108+
<td ng-class="{success: todo.important}">{{todo.important}}</td>
109+
</tr>
110+
</tbody>
111+
</table>
112+
<ul ng-switch-when="list">
113+
<li ng-repeat="todo in benchmark.todos track by todo.id"
114+
ng-class="{
115+
completed: todo.completed,
116+
urgent: todo.urgent,
117+
important: todo.important
118+
}">#{{todo.id}}</li>
119+
</ul>
120+
<div ng-switch-when="singleOptimized" class="panel"
121+
ng-class="{'panel-success': !!benchmark.todos, 'panel-error': !benchmark.todos}">
122+
<div class="panel-heading">
123+
<h3 class="panel-title">Information</h3>
124+
</div>
125+
<div class="panel-body"> Panel content </div>
126+
</div>
127+
<div ng-switch-when="single" class="panel"
128+
ng-class="{'panel-success': benchmark.todos, 'panel-error': !benchmark.todos}">
129+
<div class="panel-heading">
130+
<h3 class="panel-title">Information</h3>
131+
</div>
132+
<div class="panel-body"> Panel content </div>
133+
</div>
134+
</div>
135+
</div>
136+
</div>

0 commit comments

Comments
 (0)