Benchmark to compare the implementation of the 'forEach' statement of different Javascript frameworks.

benchmark.css

.framework-box {
  display: inline-block;
	width: 200px;
	height: 80px;
	margin-left: 10px;
}

.framework-box h2 {
	text-align: center;
	background-color: grey;
}

.time {
	background-color: green;
	padding-left: 10px;
}

benchmark.js

function ForEachBenchmark ($scope) {
  $scope.frameworks = [
		{title: 'Angular JS', startTime: '', endTime: '', workTime: ''} ,
		{title: 'ExtJS', startTime: '', endTime: '', workTime: ''} ,
		{title: 'JQuery', startTime: '', endTime: '', workTime: ''} ,
		{title: 'Pure Javascript', startTime: '', endTime: '', workTime: ''}
	];
	
	$scope.startBenchmark = function () {
		var startTime, endTime ,
		    ngArray = extArray = $Array = pureArray = [] ,
		    SIZE = 1000000;
		
		/*  Angular JS  */
		// Fills the array
		for (var i=0; i<SIZE; i++) ngArray.push (1);

		startTime = new Date ();
		$scope.frameworks[0].startTime = startTime.toLocaleTimeString ();

		// Starts 10 forEach
		angular.forEach (ngArray, function (val) {
			val++;
		});
	
		angular.forEach (ngArray, function (val) {
			val--;
		});
	
		angular.forEach (ngArray, function (val) {
			val++;
		});
	
		angular.forEach (ngArray, function (val) {
			val--;
		});
	
		angular.forEach (ngArray, function (val) {
			val++;
		});
	
		angular.forEach (ngArray, function (val) {
			val--;
		});
	
		angular.forEach (ngArray, function (val) {
			val++;
		});
	
		angular.forEach (ngArray, function (val) {
			val--;
		});
	
		angular.forEach (ngArray, function (val) {
			val++;
		});
	
		angular.forEach (ngArray, function (val) {
			val--;
		});

		endTime = new Date ();
		$scope.frameworks[0].endTime = endTime.toLocaleTimeString ();

		$scope.frameworks[0].workTime = endTime.getTime () - startTime.getTime ();

		/*  ExtJS  */
		// Fills the array
		for (var i=0; i<SIZE; i++) extArray.push (2);

		startTime = new Date ();
		$scope.frameworks[1].startTime = startTime.toLocaleTimeString ();

		// Starts 10 forEach
		Ext.each (extArray, function (val) {
			val++;
		});
	
		Ext.each (extArray, function (val) {
			val--;
		});
	
		Ext.each (extArray, function (val) {
			val++;
		});
	
		Ext.each (extArray, function (val) {
			val--;
		});
	
		Ext.each (extArray, function (val) {
			val++;
		});
	
		Ext.each (extArray, function (val) {
			val--;
		});
	
		Ext.each (extArray, function (val) {
			val++;
		});
	
		Ext.each (extArray, function (val) {
			val--;
		});
	
		Ext.each (extArray, function (val) {
			val++;
		});
	
		Ext.each (extArray, function (val) {
			val--;
		});

		endTime = new Date ();
		$scope.frameworks[1].endTime = endTime.toLocaleTimeString ();

		$scope.frameworks[1].workTime = endTime.getTime () - startTime.getTime ();

		/*  JQuery  */
		// Fills the array
		for (var i=0; i<SIZE; i++) $Array.push (3);

		startTime = new Date ();
		$scope.frameworks[2].startTime = startTime.toLocaleTimeString ();

		// Starts 10 forEach
		$.each ($Array, function (key, val) {
			val++;
		});
	
		$.each ($Array, function (key, val) {
			val--;
		});
	
		$.each ($Array, function (key, val) {
			val++;
		});
	
		$.each ($Array, function (key, val) {
			val--;
		});
	
		$.each ($Array, function (key, val) {
			val++;
		});
	
		$.each ($Array, function (key, val) {
			val--;
		});
	
		$.each ($Array, function (key, val) {
			val++;
		});
	
		$.each ($Array, function (key, val) {
			val--;
		});
	
		$.each ($Array, function (key, val) {
			val++;
		});
	
		$.each ($Array, function (key, val) {
			val--;
		});

		endTime = new Date ();
		$scope.frameworks[2].endTime = endTime.toLocaleTimeString ();

		$scope.frameworks[2].workTime = endTime.getTime () - startTime.getTime ();

		/*  Pure Javascript  */
		// Fills the array
		for (var i=0; i<SIZE; i++) pureArray.push (4);

		startTime = new Date ();
		$scope.frameworks[3].startTime = startTime.toLocaleTimeString ();

		// Starts 10 forEach
		for (var i=0; i<SIZE; i++) pureArray[i]++;
		for (var i=0; i<SIZE; i++) pureArray[i]--;
		for (var i=0; i<SIZE; i++) pureArray[i]++;
		for (var i=0; i<SIZE; i++) pureArray[i]--;
		for (var i=0; i<SIZE; i++) pureArray[i]++;
		for (var i=0; i<SIZE; i++) pureArray[i]--;
		for (var i=0; i<SIZE; i++) pureArray[i]++;
		for (var i=0; i<SIZE; i++) pureArray[i]--;
		for (var i=0; i<SIZE; i++) pureArray[i]++;
		for (var i=0; i<SIZE; i++) pureArray[i]--;

		endTime = new Date ();
		$scope.frameworks[3].endTime = endTime.toLocaleTimeString ();

		$scope.frameworks[3].workTime = endTime.getTime () - startTime.getTime ();
	}
}

index.html

<!DOCTYPE html>
<html ng-app>
  <head>
		<meta charset="utf-8">
		<title>For-each benchmark</title>
		<link rel="stylesheet" type="text/css" href="benchmark.css"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
		<script type="text/javascript" src="benchmark.js"></script>
	</head>
	<body>
		<h1>forEach benchmark</h1>
		<p>This benchmark tests three different javascript frameworks to figure out which has the most efficient implementation of the forEach statement. The last one is a pure javascript implementation.</p>
		<hr/>
		<div ng-controller="ForEachBenchmark">
			<input type="button" value="Start benchmark" ng-click="startBenchmark();"><br/>
			<div class="framework-box" ng-repeat="framework in frameworks">
				<h2>{{framework.title}}</h2>
				<div class="time">
					Start time : <b>{{framework.startTime}}</b><br/>
					End time : <b>{{framework.endTime}}</b><br/>
					Work time : <b>{{framework.workTime}}</b>ms<br/>
				</div>
				<hr/>
			</div>
		</div>
	</body>
</html>