mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-24 03:55:49 +08:00
refactor(perf): migration event delegation benchmark to benchpress
This commit is contained in:
Tobias Bosch
57
benchmarks/event-delegation-bp/app.js
Normal file
57
benchmarks/event-delegation-bp/app.js
Normal file
@@ -0,0 +1,57 @@
|
||||
var app = angular.module('eventDelegationBenchmark', []);
|
||||
|
||||
app.directive('noopDir', function() {
|
||||
return {
|
||||
compile: function($element, $attrs) {
|
||||
return function($scope, $element) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
app.directive('nativeClick', ['$parse', function($parse) {
|
||||
return {
|
||||
compile: function($element, $attrs) {
|
||||
var expr = $parse($attrs.tstEvent);
|
||||
return function($scope, $element) {
|
||||
$element[0].addEventListener('click', function() {
|
||||
console.log('clicked');
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
app.directive('dlgtClick', function() {
|
||||
return {
|
||||
compile: function($element, $attrs) {
|
||||
var evt = $attrs.dlgtClick;
|
||||
// We don't setup the global event listeners as the costs are small and one time only...
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
app.controller('DataController', function($rootScope) {
|
||||
this.ngRepeatCount = 1000;
|
||||
this.rows = [];
|
||||
var self = this;
|
||||
|
||||
benchmarkSteps.push({
|
||||
name: '$apply',
|
||||
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('row'+i);
|
||||
}
|
||||
}
|
||||
$rootScope.$apply();
|
||||
}
|
||||
});
|
||||
});
|
||||
10
benchmarks/event-delegation-bp/bp.conf.js
Normal file
10
benchmarks/event-delegation-bp/bp.conf.js
Normal file
@@ -0,0 +1,10 @@
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
scripts: [{
|
||||
id: 'angular',
|
||||
src: '/build/angular.js'
|
||||
},{
|
||||
src: 'app.js',
|
||||
}]
|
||||
});
|
||||
};
|
||||
139
benchmarks/event-delegation-bp/main.html
Normal file
139
benchmarks/event-delegation-bp/main.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<div ng-app="eventDelegationBenchmark">
|
||||
<div ng-controller="DataController as ctrl">
|
||||
<div class="container-fluid">
|
||||
|
||||
<p>
|
||||
Impact of event delegation.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>
|
||||
Number of ngRepeats:
|
||||
<input type="number" ng-model="ctrl.ngRepeatCount">
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="radio"><label><input type=radio ng-model="benchmarkType" value="ngClick">ngClick</label></div>
|
||||
<div class="radio"><label><input type=radio ng-model="benchmarkType" value="ngClickNoJqLite">ngClick without jqLite</label></div>
|
||||
<div class="radio"><label><input type=radio ng-model="benchmarkType" value="ngShow">baseline: ng-show</label></div>
|
||||
<div class="radio"><label><input type=radio ng-model="benchmarkType" value="textInterpolation">baseline: text interpolation</label></div>
|
||||
<div class="radio"><label><input type=radio ng-model="benchmarkType" value="dlgtClick">delegate event directive (only compile)</label></div>
|
||||
<div class="radio"><label><input type=radio ng-model="benchmarkType" value="noopDir">baseline: noop directive (compile and link)</label></div>
|
||||
<div class="radio"><label><input type=radio ng-model="benchmarkType" value="noop">baseline: no directive</label></div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
How to read the results:
|
||||
<ul>
|
||||
<li>The benchmark measures how long it takes to instantiate a given number of directives</li>
|
||||
<li>ngClick is compared against ngShow and text interpolation as baseline. The results show
|
||||
how expensive ngClick is compared to other very simple directives that touch the DOM.
|
||||
</li>
|
||||
<li>To measure the impact of jqLite.on vs element.addEventListener there is also a benchmark
|
||||
that as a modified version of ngClick that uses element.addEventListener.
|
||||
</li>
|
||||
<li>The delegate event directive is compared against a noop directive with a compile and link function and the case with no directives.
|
||||
The result shows how expensive it is to add a link function to a directive, as the delegate event directive has none.
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Results as of 7/31/2014:
|
||||
<ul>
|
||||
<li>ngClick is very close to ngShow and text interpolation, especially when looking at a version of ngClick that does not use jqLite.on but element.addEventListener instead.</li>
|
||||
<li>A delegate event directive that has no link function has the same speed as a directive with link function. I.e. ngClick is slower compared to the delegate event directive only because ngClick touches
|
||||
the DOM for every element</li>
|
||||
<li>A delegate event directive could be about 50% faster than ngClick. However, the overall performance
|
||||
benefit depends on how many (and which) other directives are used on the same element
|
||||
and what other things are part of the measures use case.
|
||||
E.g. rows of a table with ngRepeat that use ngClick will probably also contain text interpolation.
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
Debug output:
|
||||
<ng-switch on="benchmarkType">
|
||||
<div ng-switch-when="ngClick">
|
||||
<div>
|
||||
<span ng-repeat="row in ctrl.rows">
|
||||
<span ng-click="a()">1</span>
|
||||
<span ng-click="a()">1</span>
|
||||
<span ng-click="a()">1</span>
|
||||
<span ng-click="a()">1</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-switch-when="ngClickNoJqLite">
|
||||
<div>
|
||||
<span ng-repeat="row in ctrl.rows">
|
||||
<span native-click="a()">1</span>
|
||||
<span native-click="a()">1</span>
|
||||
<span native-click="a()">1</span>
|
||||
<span native-click="a()">1</span>
|
||||
<span native-click="a()">1</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-switch-when="ngShow">
|
||||
<div>
|
||||
<span ng-repeat="row in ctrl.rows">
|
||||
<span ng-show="true">1</span>
|
||||
<span ng-show="true">1</span>
|
||||
<span ng-show="true">1</span>
|
||||
<span ng-show="true">1</span>
|
||||
<span ng-show="true">1</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-switch-when="textInterpolation">
|
||||
<div>
|
||||
<span ng-repeat="row in ctrl.rows">
|
||||
<span>{{row}}</span>
|
||||
<span>{{row}}</span>
|
||||
<span>{{row}}</span>
|
||||
<span>{{row}}</span>
|
||||
<span>{{row}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-switch-when="dlgtClick">
|
||||
<div>
|
||||
<span ng-repeat="row in ctrl.rows">
|
||||
<span dlgt-click="a()">1</span>
|
||||
<span dlgt-click="a()">1</span>
|
||||
<span dlgt-click="a()">1</span>
|
||||
<span dlgt-click="a()">1</span>
|
||||
<span dlgt-click="a()">1</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-switch-when="noopDir">
|
||||
<div>
|
||||
<span ng-repeat="row in ctrl.rows">
|
||||
<span noop-dir>1</span>
|
||||
<span noop-dir>1</span>
|
||||
<span noop-dir>1</span>
|
||||
<span noop-dir>1</span>
|
||||
<span noop-dir>1</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-switch-when="noop">
|
||||
<div>
|
||||
<span ng-repeat="row in ctrl.rows">
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-switch>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user