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

Commit 26a5779

Browse files
NarretzNarretz
committedJun 25, 2018
chore(benchpress): add ngRepeat animation benchmark
Closes #13976
·
v1.8.3v1.8.0
1 parent a90d0cb commit 26a5779

File tree

6 files changed

+236
-0
lines changed

6 files changed

+236
-0
lines changed
 

‎benchmarks/repeat-animate-bp/app-classfilter.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
'use strict';
2+
3+
angular.module('repeatAnimateBenchmark', ['ngAnimate'])
4+
.config(function($animateProvider) {
5+
$animateProvider.classNameFilter(/animate-/);
6+
})
7+
.run(function($rootScope) {
8+
$rootScope.fileType = 'classfilter';
9+
});

‎benchmarks/repeat-animate-bp/app-noanimate.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
3+
angular.module('repeatAnimateBenchmark', [])
4+
.run(function($rootScope) {
5+
$rootScope.fileType = 'noanimate';
6+
});

‎benchmarks/repeat-animate-bp/app.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use strict';
2+
3+
angular.module('repeatAnimateBenchmark', ['ngAnimate'])
4+
.run(function($rootScope) {
5+
$rootScope.fileType = 'default';
6+
});
7+

‎benchmarks/repeat-animate-bp/bp.conf.js

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

‎benchmarks/repeat-animate-bp/common.js

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
'use strict';
2+
3+
(function() {
4+
var app = angular.module('repeatAnimateBenchmark');
5+
6+
app.config(function($compileProvider, $animateProvider) {
7+
if ($compileProvider.debugInfoEnabled) {
8+
$compileProvider.debugInfoEnabled(false);
9+
}
10+
11+
});
12+
13+
app.run(function($animate) {
14+
if ($animate.enabled) {
15+
$animate.enabled(true);
16+
}
17+
});
18+
19+
app.controller('DataController', function($scope, $rootScope, $animate) {
20+
var totalRows = 500;
21+
var totalColumns = 20;
22+
23+
var data = $scope.data = [];
24+
25+
function fillData() {
26+
if ($animate.enabled) {
27+
$animate.enabled($scope.benchmarkType !== 'globallyDisabled');
28+
}
29+
30+
for (var i = 0; i < totalRows; i++) {
31+
data[i] = [];
32+
for (var j = 0; j < totalColumns; j++) {
33+
data[i][j] = {
34+
i: i
35+
};
36+
}
37+
}
38+
}
39+
40+
benchmarkSteps.push({
41+
name: 'enter',
42+
fn: function() {
43+
$scope.$apply(function() {
44+
fillData();
45+
});
46+
}
47+
});
48+
49+
benchmarkSteps.push({
50+
name: 'leave',
51+
fn: function() {
52+
$scope.$apply(function() {
53+
data = $scope.data = [];
54+
});
55+
}
56+
});
57+
});
58+
59+
app.directive('disableAnimations', function($animate) {
60+
return {
61+
link: {
62+
pre: function(s, e) {
63+
$animate.enabled(e, false);
64+
}
65+
}
66+
};
67+
});
68+
69+
app.directive('noop', function($animate) {
70+
return {
71+
link: {
72+
pre: angular.noop
73+
}
74+
};
75+
});
76+
77+
app.directive('baseline', function($document) {
78+
return {
79+
restrict: 'E',
80+
link: function($scope, $element) {
81+
var document = $document[0];
82+
83+
var i, j, row, cell, comment;
84+
var template = document.createElement('span');
85+
template.setAttribute('ng-repeat', 'foo in foos');
86+
template.classList.add('ng-scope');
87+
template.appendChild(document.createElement('span'));
88+
template.appendChild(document.createTextNode(':'));
89+
90+
function createList() {
91+
for (i = 0; i < $scope.data.length; i++) {
92+
row = document.createElement('div');
93+
$element[0].appendChild(row);
94+
for (j = 0; j < $scope.data[i].length; j++) {
95+
cell = template.cloneNode(true);
96+
row.appendChild(cell);
97+
cell.childNodes[0].textContent = i;
98+
cell.ng339 = 'xxx';
99+
comment = document.createComment('ngRepeat end: bar in foo');
100+
row.appendChild(comment);
101+
}
102+
103+
comment = document.createComment('ngRepeat end: foo in foos');
104+
$element[0].appendChild(comment);
105+
}
106+
}
107+
108+
$scope.$watch('data.length', function(newVal) {
109+
if (newVal === 0) {
110+
while ($element[0].firstChild) {
111+
$element[0].removeChild($element[0].firstChild);
112+
}
113+
} else {
114+
createList();
115+
}
116+
});
117+
}
118+
};
119+
});
120+
})();

‎benchmarks/repeat-animate-bp/main.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<div ng-app="repeatAnimateBenchmark" ng-cloak>
2+
<div ng-controller="DataController">
3+
<div class="container-fluid">
4+
<p>
5+
Tests rendering of an ngRepeat with 500 elements.<br>
6+
Animations can be enabled / disabled in different ways.<br>
7+
Two tests require reloading the app with different module / app configurations.
8+
</p>
9+
10+
<div><label><input type="radio" ng-model="benchmarkType" value="none">none: </label></div>
11+
<div><label><input type="radio" ng-model="benchmarkType" value="baseline">baseline (vanilla Javascript): </label></div>
12+
<div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'default'" value="enabled">enabled : </label> (requires <a href="./">app.js</a>)</div>
13+
<div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'default' && fileType !== 'classfilter'" value="globallyDisabled">globally disabled:</label> (requires <a href="./">app.js</a> or <a href="?app=app-classfilter.js">app-classfilter.js</a>)</div>
14+
<div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'default'" value="disabledParentElement">disabled by $animate.enabled() on parent element: </label> (requires <a href="./">app.js</a>)</div>
15+
<div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'noanimate'" value="noanimate">Without ngAnimate:</label> (requires <a href="?app=app-noanimate.js">app-noanimate.js</a>)</div>
16+
<div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'classfilter'" value="disabledClassFilter">disabled by classNameFilter on element:</label> (requires <a href="?app=app-classfilter.js">app-classfilter.js</a>)</div>
17+
18+
<ng-switch on="benchmarkType">
19+
<baseline ng-switch-when="baseline">
20+
</baseline>
21+
<div ng-switch-when="noanimate">
22+
<div noop>
23+
<div ng-repeat="row in data">
24+
<span ng-repeat="column in row">
25+
<span>{{column.i}}</span>
26+
</span>
27+
</div>
28+
</div>
29+
</div>
30+
<div ng-switch-when="enabled">
31+
<div noop>
32+
<div ng-repeat="row in data">
33+
<span ng-repeat="column in row">
34+
<span>{{column.i}}</span>
35+
</span>
36+
</div>
37+
</div>
38+
</div>
39+
<div ng-switch-when="globallyDisabled">
40+
<div noop>
41+
<div ng-repeat="row in data">
42+
<span ng-repeat="column in row">
43+
<span>{{column.i}}</span>
44+
</span>
45+
</div>
46+
</div>
47+
</div>
48+
<div ng-switch-when="disabledClassFilter">
49+
<div noop>
50+
<div ng-repeat="row in data">
51+
<span class="disable-animations" ng-repeat="column in row">
52+
<span>{{column.i}}</span>
53+
</span>
54+
</div>
55+
</div>
56+
</div>
57+
<div ng-switch-when="disabledParentElement">
58+
<div disable-animations>
59+
<div ng-repeat="row in data">
60+
<span ng-repeat="column in row">
61+
<span>{{column.i}}</span>
62+
</span>
63+
</div>
64+
</div>
65+
</div>
66+
</ng-switch>
67+
68+
</div>
69+
</div>
70+
</div>

0 commit comments

Comments
 (0)
This repository has been archived.