AngularJS forEach vs Native forEach vs key vs for

JavaScript performance comparison

Revision 31 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js">
</script>
<script>
  var len = 1000;
  var arr = new Array();
  while (len--) {
    arr[len] = len;
  }
</script>
      
<script>
Benchmark.prototype.setup = function() {
  var a = angular,
    u = {};
  
  a.forEach = function(obj, iterator, context) {
    var key, objLen;
    if (obj) {
      if (a.isFunction(obj)) {
        for (key in obj) {
          // Need to check if hasOwnProperty exists,
          // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
          if (key !== 'prototype' && key !== 'length' && key !== 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
            iterator.call(context, obj[key], key);
          }
        }
      } else if (u.isArray(obj) || u.isArrayLike(obj)) {
        objLen = obj.length;
        key = 0; //cached length is faster!
        for (; key < objLen; key++) {
          iterator.call(context, obj[key], key);
        }
      } else if (obj.forEach && obj.forEach !== a.forEach) { //https://github.com/angular/angular.js/commit/36625de0d3ebc1fc091af474d942c6ce16b0a1c0
        obj.forEach(iterator, context);
      } else {
        for (key in obj) {
          if (obj.hasOwnProperty(key)) {
            iterator.call(context, obj[key], key);
          }
        }
      }
    }
    return obj;
  };
  
  u.isWindow = function(obj) {
    return obj && obj.document && obj.location && obj.alert && obj.setInterval;
  };
  
  u.isArray = (function() {
    if (!a.isFunction(Array.isArray)) {
      return function(value) {
        return toString.call(value) === '[object Array]';
      };
    }
    return Array.isArray;
  })();
  
  u.isArrayLike = function(obj) {
    if (obj === null || u.isWindow(obj)) {
      return false;
    }
  
    var length = obj.length;
  
    if (obj.nodeType === 1 && length) {
      return true;
    }
  
    return a.isString(obj) || a.isArray(obj) || length === 0 || typeof length === 'number' && length > 0 && (length - 1) in obj;
  };
  
  
  
  
  function test7WithFn(arr, fn) {
    var i = 0,
      arrLen = arr.length;
    for (; i < arrLen; i++) {
      fn(arr[i]);
    }
  }

};
</script>

Preparation code output

<script> var len = 1000; var arr = new Array(); while (len--) { arr[len] = len; } </script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
AngularJS forEach with Improved forEach Method
angular.forEach(arr, function(item) {
  item;
});
pending…
test7WithFn(arr, function(item) {
  item;
});
pending…
all init inside for
for (var i = 0, arrLen = arr.length; i < arrLen; i++) {
  arr[i];
}
pending…
while
var i = 0,
  arrLen = arr.length;
while (i < arrLen) {
  arr[i++];
}
pending…
for loop, improved super-cached i and arr length, even simpler!
var i = 0,
  arrLen = arr.length;
for (; i < arrLen; i++) {
  arr[i];
}
pending…
for loop, simple (with var)
for (var i = 0; i < arr.length; i++) {
  arr[i];
}
pending…
Native forEach
arr.forEach(function(item) {
  item;
});
pending…
AngularJS forEach
angular.forEach(arr, function(item) {
  item;
});
pending…
for key in arr
for (var key in arr) {
  arr[key];
}
pending…
for loop
for (i = arr.length - 1; i >= 0; i--) {
  arr[i];
}
pending…
for loop, super-cached i and arr length, simpler!
var i, arrLen = arr.length;
for (i = 0; i < arrLen; i++) {
  arr[i];
}
pending…

Compare results of other browsers

Revisions

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

0 Comments