jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
This test compares the impact of event bubbling in an angular application and compares it against a "flat" event bus provided by $rootScope.$emit.
The good thing is there should barely cases where you actually need $broadcast. Learn how to avoid it here:
http://stackoverflow.com/a/19498009/288703
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<style>
ul li ul {
display: block;
}
ul li ul li {
display: inline-block;
}
</style>
<script>
angular
.module("testApp",[])
.run(function($window, $rootScope) {
$window.$rootScope = $rootScope;
})
.controller("testController",function($rootScope, $scope) {
$scope.items = [];
for (var i = 0; i < 10; i++) {
$scope.items.push({
id: i,
subItems: (function() {
var subItems = [];
for (var j = 0; j < 5; j++) {
subItems.push({id: j });
}
return subItems;
})()
})
}
})
.directive("listener",function() {
return {
restrict: 'C',
link: function(scope) {
scope.$on('fooHappened', angular.noop);
}
}
});
</script>
<div ng-app="testApp">
<div ng-controller="testController">
<ul>
<li ng-repeat="item in items">
<ul>
<li ng-repeat="subItem in item.subItems">
<span class="listener">{{item.id}}:{{subItem.id}}</span>
</li>
</ul>
</li>
</ul>
</div>
</div>Ready to run.
| Test | Ops/sec | |
|---|---|---|
| $broadcast | | ready |
| $emit | | ready |
| $broadcast (without matching event) | | ready |
| $emit (without matching event) | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.