mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-01-12 22:45:52 +08:00
test($parse): adding benchmark for execution of $parse()ed expressions
Part of #8901
This commit is contained in:
Jason Bedard
86
benchmarks/parsed-expressions-bp/app.js
Executable file
86
benchmarks/parsed-expressions-bp/app.js
Executable file
@@ -0,0 +1,86 @@
|
||||
var app = angular.module('parsedExpressionBenchmark', []);
|
||||
|
||||
app.config(function($compileProvider) {
|
||||
if ($compileProvider.debugInfoEnabled) {
|
||||
$compileProvider.debugInfoEnabled(false);
|
||||
}
|
||||
});
|
||||
|
||||
app.filter('noop', function() {
|
||||
return function(input) {
|
||||
return input;
|
||||
};
|
||||
});
|
||||
|
||||
//Executes the specified expression as a watcher
|
||||
app.directive('bmPeWatch', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
compile: function($element, $attrs) {
|
||||
$element.text( $attrs.bmPeWatch );
|
||||
return function($scope, $element, $attrs) {
|
||||
$scope.$watch($attrs.bmPeWatch, function(val) {
|
||||
$element.text(val);
|
||||
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
//Executes the specified expression as a watcher
|
||||
//Adds a simple wrapper method to allow use of $watch instead of $watchCollection
|
||||
app.directive('bmPeWatchLiteral', function($parse) {
|
||||
function retZero() {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
compile: function($element, $attrs) {
|
||||
$element.text( $attrs.bmPeWatchLiteral );
|
||||
return function($scope, $element, $attrs) {
|
||||
$scope.$watch( $parse($attrs.bmPeWatchLiteral, retZero) );
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
app.controller('DataController', function($scope, $rootScope) {
|
||||
var totalRows = 10000;
|
||||
|
||||
var data = $scope.data = [];
|
||||
|
||||
var star = '*';
|
||||
|
||||
$scope.func = function() { return star;};
|
||||
|
||||
for (var i=0; i<totalRows; i++) {
|
||||
data.push({
|
||||
index: i,
|
||||
odd: i%2 === 0,
|
||||
even: i%2 === 1,
|
||||
str0: "foo-" + Math.random()*Date.now(),
|
||||
str1: "bar-" + Math.random()*Date.now(),
|
||||
str2: "baz-" + Math.random()*Date.now(),
|
||||
num0: Math.random()*Date.now(),
|
||||
num1: Math.random()*Date.now(),
|
||||
num2: Math.random()*Date.now(),
|
||||
date0: new Date(Math.random()*Date.now()),
|
||||
date1: new Date(Math.random()*Date.now()),
|
||||
date2: new Date(Math.random()*Date.now()),
|
||||
func: function(){ return star; },
|
||||
obj: data[i-1],
|
||||
keys: data[i-1] && (data[i-1].keys || Object.keys(data[i-1]))
|
||||
});
|
||||
}
|
||||
|
||||
benchmarkSteps.push({
|
||||
name: '$apply',
|
||||
fn: function() {
|
||||
for (var i=0; i<50; i++) {
|
||||
$rootScope.$digest();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
11
benchmarks/parsed-expressions-bp/bp.conf.js
Executable file
11
benchmarks/parsed-expressions-bp/bp.conf.js
Executable file
@@ -0,0 +1,11 @@
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
scripts: [ {
|
||||
id: 'angular',
|
||||
src: '/build/angular.js'
|
||||
},
|
||||
{
|
||||
src: 'app.js',
|
||||
}]
|
||||
});
|
||||
};
|
||||
190
benchmarks/parsed-expressions-bp/main.html
Executable file
190
benchmarks/parsed-expressions-bp/main.html
Executable file
@@ -0,0 +1,190 @@
|
||||
<div ng-app="parsedExpressionBenchmark" ng-cloak>
|
||||
<div ng-controller="DataController">
|
||||
<div class="container-fluid">
|
||||
<p>
|
||||
Tests the execution of $parse()ed expressions. Each test tries to isolate specific expression types. Expressions should (probably) not be constant so they get evaluated per digest.
|
||||
</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="simpleProperty" id="simpleProperty">
|
||||
<label for="simpleProperty">Simple Properties</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="fieldAccess" id="fieldAccess">
|
||||
<label for="fieldAccess">Field Accessors</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="fieldIndex" id="fieldIndex">
|
||||
<label for="fieldIndex">Field Indexors</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="operators" id="operators">
|
||||
<label for="operators">Binary/Unary operators</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="filters" id="filters">
|
||||
<label for="filters">Filters</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="functionCalls" id="functionCalls">
|
||||
<label for="functionCalls">Function calls</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="objectLiterals" id="objectLiterals">
|
||||
<label for="objectLiterals">Object Literals</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" ng-model="expressionType" value="arrayLiterals" id="arrayLiterals">
|
||||
<label for="arrayLiterals">Array Literals</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
NOTES:
|
||||
- ensure each tested expression has at least one variable in it to avoid constant expressions
|
||||
-->
|
||||
|
||||
<ul ng-switch="expressionType">
|
||||
<li ng-switch-when="simpleProperty" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch="rowIdx"></span>
|
||||
<span bm-pe-watch="row.index"></span>
|
||||
<span bm-pe-watch="row.num0"></span>
|
||||
<span bm-pe-watch="row.num1"></span>
|
||||
<span bm-pe-watch="row.num2"></span>
|
||||
<span bm-pe-watch="row.str0"></span>
|
||||
<span bm-pe-watch="row.str1"></span>
|
||||
<span bm-pe-watch="row.str2"></span>
|
||||
<span bm-pe-watch="row.date0"></span>
|
||||
<span bm-pe-watch="row.obj"></span>
|
||||
<span bm-pe-watch="row.keys"></span>
|
||||
</li>
|
||||
|
||||
<li ng-switch-when="fieldAccess" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch="row.index"></span>
|
||||
<span bm-pe-watch="row.num0"></span>
|
||||
<span bm-pe-watch="row.num1"></span>
|
||||
<span bm-pe-watch="row.str0"></span>
|
||||
<span bm-pe-watch="row.str1"></span>
|
||||
<span bm-pe-watch="row.obj.index"></span>
|
||||
<span bm-pe-watch="row.obj.index"></span>
|
||||
<span bm-pe-watch="row.obj.index"></span>
|
||||
<span bm-pe-watch="row.obj.obj.index"></span>
|
||||
<span bm-pe-watch="row.obj.obj.index"></span>
|
||||
<span bm-pe-watch="row.obj.obj.obj.index"></span>
|
||||
<span bm-pe-watch="row.obj.obj.obj.index"></span>
|
||||
</li>
|
||||
|
||||
<li ng-switch-when="fieldIndex" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch="data[rowIdx]"></span>
|
||||
<span bm-pe-watch="row['str0']"></span>
|
||||
<span bm-pe-watch="row['str1']"></span>
|
||||
<span bm-pe-watch="data[row['index']]['index']"></span>
|
||||
<span bm-pe-watch="data[rowIdx]['obj']"></span>
|
||||
<span bm-pe-watch="data[rowIdx]['obj']['obj']"></span>
|
||||
<span bm-pe-watch="row[row['keys'][0]]"></span>
|
||||
<span bm-pe-watch="row[row['keys'][1]]"></span>
|
||||
<span bm-pe-watch="row[row['keys'][2]]"></span>
|
||||
<span bm-pe-watch="row[row['keys'][3]]"></span>
|
||||
<span bm-pe-watch="row[row['keys'][4]]"></span>
|
||||
<span bm-pe-watch="row[row['keys'][5]]"></span>
|
||||
|
||||
</li>
|
||||
|
||||
<li ng-switch-when="operators" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch="+rowIdx"></span>
|
||||
<span bm-pe-watch="-rowIdx"></span>
|
||||
<span bm-pe-watch="rowIdx + 1"></span>
|
||||
<span bm-pe-watch="rowIdx - 1"></span>
|
||||
<span bm-pe-watch="rowIdx * 2"></span>
|
||||
<span bm-pe-watch="rowIdx + -1"></span>
|
||||
<span bm-pe-watch="rowIdx - -1"></span>
|
||||
<span bm-pe-watch="-rowIdx * 2 + 1"></span>
|
||||
<span bm-pe-watch="rowIdx % 2"></span>
|
||||
<span bm-pe-watch="rowIdx % 2 === 1"></span>
|
||||
<span bm-pe-watch="rowIdx % 2 === 0"></span>
|
||||
<span bm-pe-watch="rowIdx / 1"></span>
|
||||
<span bm-pe-watch="-rowIdx * 2 * rowIdx + rowIdx / rowIdx + 1"></span>
|
||||
</li>
|
||||
|
||||
<li ng-switch-when="filters" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch="rowIdx | noop"></span>
|
||||
<span bm-pe-watch="rowIdx | noop"></span>
|
||||
<span bm-pe-watch="rowIdx | noop"></span>
|
||||
<span bm-pe-watch="rowIdx | noop:1"></span>
|
||||
<span bm-pe-watch="rowIdx | noop:rowIdx"></span>
|
||||
<span bm-pe-watch="rowIdx | noop:1:2:3:4:5"></span>
|
||||
<span bm-pe-watch="rowIdx | noop:rowIdx:rowIdx:rowIdx"></span>
|
||||
<span bm-pe-watch="rowIdx | noop | noop"></span>
|
||||
<span bm-pe-watch="rowIdx | noop:1 | noop"></span>
|
||||
<span bm-pe-watch="rowIdx | noop | noop:null:undefined:0"></span>
|
||||
<span bm-pe-watch="rowIdx | noop | noop | noop"></span>
|
||||
<span bm-pe-watch="rowIdx | noop:1 | noop:2 | noop:3"></span>
|
||||
</li>
|
||||
|
||||
<li ng-switch-when="functionCalls" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch="func()"></span>
|
||||
<span bm-pe-watch="func(1)"></span>
|
||||
<span bm-pe-watch="func(1, 2)"></span>
|
||||
<span bm-pe-watch="func(1, 2, 3)"></span>
|
||||
<span bm-pe-watch="row.func()"></span>
|
||||
<span bm-pe-watch="row.func(1)"></span>
|
||||
<span bm-pe-watch="row.func(1, 2)"></span>
|
||||
<span bm-pe-watch="row.func(1, 2, 3)"></span>
|
||||
<span bm-pe-watch="func(func())"></span>
|
||||
<span bm-pe-watch="func(func(), func())"></span>
|
||||
<span bm-pe-watch="row.func(row.func())"></span>
|
||||
<span bm-pe-watch="row.func(row.func(), row.func())"></span>
|
||||
</li>
|
||||
|
||||
<li ng-switch-when="objectLiterals" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch-literal="{foo: rowIdx}"></span>
|
||||
<span bm-pe-watch-literal="{foo: row, bar: rowIdx}"></span>
|
||||
<span bm-pe-watch-literal="{0: row, 1: rowIdx, 2: 3}"></span>
|
||||
<span bm-pe-watch-literal="{str: 'foo', num: rowIdx, b: true}"></span>
|
||||
<span bm-pe-watch-literal="{a: {b: {c: {d: {e: {f: rowIdx}}}}}}"></span>
|
||||
<span bm-pe-watch-literal="{a: rowIdx, b: 1, c: 2, d: 3, e: 4, f: 5, g: rowIdx, h: 6, i: 7, j: 8, k: rowIdx}"></span>
|
||||
</li>
|
||||
|
||||
<li ng-switch-when="arrayLiterals" ng-repeat="(rowIdx, row) in ::data">
|
||||
<span bm-pe-watch-literal="[rowIdx]"></span>
|
||||
<span bm-pe-watch-literal="[rowIdx, 0]"></span>
|
||||
<span bm-pe-watch-literal="[rowIdx, 0, 1]"></span>
|
||||
<span bm-pe-watch-literal="[rowIdx, 0, 1, 2]"></span>
|
||||
<span bm-pe-watch-literal="[rowIdx, 0, 1, 2, 3]"></span>
|
||||
<span bm-pe-watch-literal="[[], [rowIdx], [], [], [3], [[[]]]]"></span>
|
||||
<span bm-pe-watch-literal="[rowIdx, undefined, null, true, false]"></span>
|
||||
<span bm-pe-watch-literal="[[][0], [0][0], [][rowIdx]]"></span>
|
||||
<span bm-pe-watch-literal="[0, rowIdx]"></span>
|
||||
<span bm-pe-watch-literal="[0, 1, rowIdx]"></span>
|
||||
<span bm-pe-watch-literal="[0, 1, 2, rowIdx]"></span>
|
||||
<span bm-pe-watch-literal="[0, 1, 2, 3, rowIdx]"></span>
|
||||
</li>
|
||||
|
||||
<!--
|
||||
<li ng-switch-when="" ng-repeat="(rowIdx, row) in data">
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
<span bm-pe-watch=""></span>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user