Benchmark : Fastest way to loop through ordered arrays with JavaScript

Benchmark : Fastest way to loop through ordered arrays with JavaScript

by Daan De Smedt

HTML

<div id="console-log"></div>

CSS

.console-line {
  font-family: monospace;
  margin: 2px;
  padding: 10px;
  border-bottom: 1px dotted #9E9E9E;
  background: #efefef;
}

JavaScript

/* CONSOLE.LOG DECORATOR */
console = {
  log: function(text) {
    $("#console-log").append($('<p class=\"console-line\"></p>').html(text));
  }
};

// PROFILER
var _start;
var _end;
var _averages = [];

// VARS
var _arr = [];
var _count = 250000;
var _profileRuns = 3;

// DATA POPULATION
var _start = window.performance.now();
for (var i = 0; i < _count; i++) {
  _arr[i] = i;
}
var _end = window.performance.now();
console.log('<span style="color:#8bc34a;">Data population </span> : <span style="color:#ff9800;">' + (_end - _start) + ' milliseconds </span> for <span style="color:#ff9800;">' + _count + '</span> results');

// INIT ARRAY KEYS
var _keys = ['forEach', 'for', 'forIn', 'doWhile', 'forEach', 'while'];
for (var i = 0; i < _keys.length; i++) {
  _averages[_keys[i]] = [];
}

// PROFILE RUNS
for (var i = 0; i < _profileRuns; i++) {
  profile(i+1);
}

// PARSE RESULTS
console.log('<span style="color:#9E9E9E;">###################### AVERAGES RESULTS AFTER ' + _profileRuns + ' RUNS ######################</span>');
for (var key in _averages) {
  var _avg = 0;
  for (var i = 0; i < _averages[key].length; i++) {
    _avg += _averages[key][i];
  }
  console.log('<span style="color:#8bc34a;">Average for ' + key + ' - ' + _averages[key].length + ' profile runs</span> : ' + (_avg / _averages[key].length));
}

// PROFILE
function profile(attempt) {

  console.log('<span style="color:#9E9E9E;">###################### PROFILE RUN ' + attempt + ' ######################</span>');

  // METHOD - FOR EACH
  var _start = window.performance.now();
  _arr.forEach(function(item) {
    // just loop
  })
  var _end = window.performance.now();
  var _dur = (_end - _start);
  console.log('<span style="color:#8bc34a;">For each </span> : <span style="color:#ff9800;">' + _dur + ' milliseconds </span>');
  _averages['forEach'].push(_dur);

  // METHOD - FOR
  var _start = window.performance.now();
  for (var i = 0, len = _arr.length; i < len; i++) {
    // just loop
  }
  var _end =...