Fastest way to loop through ordered arrays with JavaScript?

Fastest way to loop through ordered arrays with JavaScript?

Benchmarking JavaScript LOOPS – What is the fastest way to loop through ordered arrays with JavaScript?

 

Fastest way to loop through ordered arrays with JavaScript?

A small benchmarking determine that the fastest wat to loop a ORDERED array using Javascript is using the ‘for’ loop. The benchmarking is based upon an array having 250000 items, calculated on the average profiling time needed to complete the loop, over 3 iterations.

for (var i = 0, len = array.length; i < len; i++) {
// just loop
}

 

JSFiddle benchmarking results

 

JavaScript loop benchmarking code

/* 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 = 5;

// 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);
}

// 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 = window.performance.now();
  var _dur = (_end - _start);
  console.log('<span style="color:#8bc34a;">For </span> : <span style="color:#ff9800;">' + _dur + ' milliseconds </span>');
  _averages['for'].push(_dur);


  // METHOD - FOR ... IN
  var _start = window.performance.now();
  for (x in _arr) {
    // just loop
  }
  var _end = window.performance.now();
  var _dur = (_end - _start);
  console.log('<span style="color:#8bc34a;">For ... In </span> : <span style="color:#ff9800;">' + _dur + ' milliseconds </span>');
  _averages['forIn'].push(_dur);


  // METHOD - DO ... WHILE
  var _start = window.performance.now();
  var _doWhile = 0;
  do {
    _doWhile += 1;
    // just loop
  } while (_doWhile < _arr.length);
  var _end = window.performance.now();
  var _dur = (_end - _start);
  console.log('<span style="color:#8bc34a;">Do ... While </span> : <span style="color:#ff9800;">' + _dur + ' milliseconds </span>');
  _averages['doWhile'].push(_dur);

  // METHOD - WHILE
  var _start = window.performance.now();
  var _while = 0;
  while (_while < _arr.length) {
    _while++;
    // just loop
  }
  var _end = window.performance.now();
  var _dur = (_end - _start);
  console.log('<span style="color:#8bc34a;">While </span> : <span style="color:#ff9800;">' + _dur + ' milliseconds </span>');
  _averages['while'].push(_dur);
}

About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com.