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

Commit 11d94ab

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

File tree

3 files changed

+300
-0
lines changed

3 files changed

+300
-0
lines changed

Diff for: ‎benchmarks/ng-class-bp/app.js

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

Diff for: ‎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+
};

Diff for: ‎benchmarks/ng-class-bp/main.html

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
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 class="container-fluid">
34+
<div ng-controller="DataController as benchmark" class="row">
35+
<div class="col-lg-12">
36+
37+
<div class="well">
38+
<h3>Parameters</h3>
39+
40+
<br>
41+
<p>
42+
<label>Number of todos</label><br>
43+
<input type="number" ng-model="benchmark.numberOfTodos">
44+
</p>
45+
46+
<br>
47+
<p>
48+
<label>Implementation</label><br>
49+
<div class="radio">
50+
<label>
51+
<input ng-model="benchmark.implementation" value="tableOptimized"
52+
type="radio" name="implementation">
53+
Table optimized <br>
54+
<code>ng-class="todo.completed && 'success'"</code>
55+
</label>
56+
</div>
57+
<div class="radio">
58+
<label>
59+
<input ng-model="benchmark.implementation" value="table"
60+
type="radio" name="implementation">
61+
Table <br>
62+
<code>ng-class="{success: todo.completed}"</code>
63+
</label>
64+
</div>
65+
<div class="radio">
66+
<label>
67+
<input ng-model="benchmark.implementation" value="list"
68+
type="radio" name="implementation">
69+
List <br>
70+
<code>ng-class="{completed: todo.completed, urgent: todo.urgent, important: todo.important"}</code>
71+
</label>
72+
</div>
73+
<div class="radio">
74+
<label>
75+
<input ng-model="benchmark.implementation" value="singleOptimized"
76+
type="radio" name="implementation">
77+
Single ngClass optimized <br>
78+
<code>
79+
ng-class="{'panel-success': !!benchmark.todos, 'panel-danger': !benchmark.todos}"
80+
</code>
81+
</label>
82+
</div>
83+
<div class="radio">
84+
<label>
85+
<input ng-model="benchmark.implementation" value="single"
86+
type="radio" name="implementation">
87+
Single ngClass <br>
88+
<code>
89+
ng-class="{'panel-success': benchmark.todos, 'panel-danger': !benchmark.todos}"
90+
</code>
91+
</label>
92+
</div>
93+
</p>
94+
</div>
95+
96+
<br>
97+
<h3>Example</h3>
98+
<div ng-switch="benchmark.implementation">
99+
100+
<table ng-switch-when="tableOptimized" class="table">
101+
<thead>
102+
<tr>
103+
<th>todo #id</th>
104+
<th>completed?</th>
105+
<th>urgent?</th>
106+
<th>important?</th>
107+
</tr>
108+
</thead>
109+
<tbody>
110+
<tr ng-repeat="todo in benchmark.todos track by todo.id"
111+
ng-class="todo.completed && 'active'"
112+
ng-class-even="todo.completed && todo.important && 'gold'"
113+
ng-class-odd="todo.completed && todo.important && 'silver'"
114+
>
115+
<td>#{{todo.id}}</td>
116+
<td>{{todo.completed}}</td>
117+
<td ng-class="todo.urgent && 'danger'">{{todo.urgent}}</td>
118+
<td ng-class="todo.important && 'success'">{{todo.important}}</td>
119+
</tr>
120+
</tbody>
121+
</table>
122+
123+
<table ng-switch-when="table" class="table">
124+
<thead>
125+
<tr>
126+
<th>todo #id</th>
127+
<th>completed?</th>
128+
<th>urgent?</th>
129+
<th>important?</th>
130+
</tr>
131+
</thead>
132+
<tbody>
133+
<tr ng-repeat="todo in benchmark.todos track by todo.id"
134+
ng-class="{active: todo.completed}"
135+
ng-class-even="{gold: todo.completed && todo.important}"
136+
ng-class-odd="{silver: todo.completed && todo.important}"
137+
>
138+
<td>#{{todo.id}}</td>
139+
<td>{{todo.completed}}</td>
140+
<td ng-class="{danger: todo.urgent}">{{todo.urgent}}</td>
141+
<td ng-class="{success: todo.important}">{{todo.important}}</td>
142+
</tr>
143+
</tbody>
144+
</table>
145+
146+
<ul ng-switch-when="list">
147+
<li ng-repeat="todo in benchmark.todos track by todo.id"
148+
ng-class="{
149+
completed: todo.completed,
150+
urgent: todo.urgent,
151+
important: todo.important
152+
}">#{{todo.id}}</li>
153+
</ul>
154+
155+
<div ng-switch-when="singleOptimized"
156+
class="panel"
157+
ng-class="{'panel-success': !!benchmark.todos, 'panel-danger': !benchmark.todos}">
158+
<div class="panel-heading">
159+
<h3 class="panel-title">Information</h3>
160+
</div>
161+
<div class="panel-body"> The title is green because there are todos... </div>
162+
</div>
163+
164+
<div ng-switch-when="single"
165+
class="panel"
166+
ng-class="{'panel-success': benchmark.todos, 'panel-danger': !benchmark.todos}">
167+
<div class="panel-heading">
168+
<h3 class="panel-title">Information</h3>
169+
</div>
170+
<div class="panel-body"> The title is green because there are todos... </div>
171+
</div>
172+
</div>
173+
174+
</div>
175+
</div>
176+
</div>
177+
<br><br><br>

0 commit comments

Comments
 (0)