AngularJS Event delegation (v3)

Revision 3 of this benchmark created by Tobias Bosch on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>

<div id="root">
    <div ng-repeat="item in list" perf-click="main.selected = item"></div>
</div>

<script>
    var repeatCount = 500,
        rootTemplate = document.getElementById('root');

    function run(perfClickDirective) {
        var root = angular.element(rootTemplate.cloneNode(true));
        document.body.appendChild(root[0]);
        angular.bootstrap(root, ['ng', function($compileProvider) {
            if (perfClickDirective) {
                $compileProvider.directive('perfClick', perfClickDirective);
            }
            return function($rootScope) {
                var i, list = [];
                for (i=0; i<repeatCount; i++) {
                    list.push(i);
                }
                $rootScope.list = list;
            };
        }]);
        root.remove();
        clearDataCache();
    }

    function clearDataCache() {
        var key, cache = angular.element.cache;

        for(key in cache) {
            if (Object.prototype.hasOwnProperty.call(cache,key)) {
                var handle = cache[key].handle;

                handle && angular.element(handle.elem).off();
                delete cache[key];
            }
        }
    }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
JIT warmup
run(null);
ready
Normal events
run(function($parse) {
        return {
            restrict: 'A',
            compile: function(element, attr) {
                var parsed = $parse(attr.perfClick);
                return function(scope, element, attr) {
                    element.on('click', function() {
                        scope.$apply(function() {
                            parsed(scope);
                        });
                    });
                }
            }
        };
    });
ready
compile and link without event
run(function($parse) {
        return {
            restrict: 'A',
            compile: function(element, attr) {
                var parsed = $parse(attr.perfClick);
                return function(scope, element, attr) {
                  
                }
            }
        };
    });
ready
compile only
run(function($parse) {
        return {
            restrict: 'A',
            compile: function(element, attr) {
                $parse(attr.perfClick);
            }
        };
    });
ready
no directive
run(null)
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Tobias Bosch on
  • Revision 3: published by Tobias Bosch on
  • Revision 4: published on