Последствия использования Javascript в функциональном стиле против «процедурного»

Question

Кто-нибудь делал бенчмаркинг или может ссылаться на статью на эту тему? Особенно интересуют результаты IE, так как обычно производительность JS не является проблемой в других браузерах.

Я хотел бы знать, насколько медленнее сделать что-то вроде:

var numbers = [1, 2, 3, 4, 5, 6, 7];
var results = numbers.map(function() { 
  // do some stuff
});

вместо типичного:

var numbers = [1, 2, 3, 4, 5, 6, 7];
var results = [];

for (var i = 0; i < numbers.length; i++) {
  var number = numbers[i];
  var result;
  // do some stuff
  results.push(result);
}

Я, очевидно, предпочитаю функциональный стиль, но я предполагаю, что дополнительные затраты на вызов дополнительной функции для каждого элемента могут замедлить работу больших коллекций.

Спасибо!

Answer 1

Не довольствуясь отсутствием доказательств по этому вопросу, я написал короткий тест.Это далеко от совершенства, но я думаю, что это отвечает на вопрос.

Я запустил его в IE 8 / win, и хотя функциональный метод медленнее, он никогда не станет узким местом в реальном коде.(Если вы не делаете вещи, которые вы не должны делать в клиенте в любом случае)

Так что я буду использовать более чистый подход всякий раз, когда мне нужно выбрать (yay)

(Best of5)
Функциональный метод: 453мс
Подход старой школы: 156мс

Array.prototype.map = function(fun) {
  var len = this.length >>> 0;
  if (typeof fun != "function")
    throw new TypeError();

  var res = new Array(len);
  var thisp = arguments[1];
  for (var i = 0; i < len; i++) {
    if (i in this)
      res[i] = fun.call(thisp, this[i], i, this);
  }

  return res;
};

/**
 *
 *
 */

// Initialize test array
var numbers = [];
for (var i = 0; i < 100000; i++) numbers.push(i);

// Benchmark!
var start = +new Date();

// Test 1
var results1 = numbers.map(function(num) {
  return num + num;
});

alert('1. Functional map:' + (start - new Date()));
start = +new Date();

// Test 2
var results2 = [];
for (var j = 0, l = numbers.length; j < l; j++) {
  var num = numbers[j];
  results2.push(num + num)
}

alert('1. Old school approach' + (start - new Date()));
start = +new Date();

Answer 2

Это действительно интересно:

http://www.slideshare.net/madrobby/extreme-javascript-performance

Однако в ECMAScript5-готовых JS-движках с нативным Array.map() все может кардинально измениться.

Answer 3

Это тоже очень интересно:

http://documentcloud.github.com/underscore/test/test.html

Результаты варьируются от браузера к браузеру, потому что подчеркивание пытается использовать собственную альтернативу там, где она доступна.