Ответ не претендует на 100% правильный. Проверено только в хроме.
Как предположил @smellyshovel в комментариях, причина в глобальном контексте. В первом случае мы меняем значение переменной, которая создана в глобальном объекте window
. Во втором случае меняем локальную переменную.
Если во втором случае менять глобальную переменную, то время выполнения будет приблизительно одинаковым. Разница зависит уже от положения блоков. Второй исполняемый будет быстрее.
console.time('loop');
var i = 0;
for (i; i < 1000000; i++) {}
console.timeEnd('loop');
(function() {
console.time('loop');
i = 0;
for (i; i < 1000000; i++) {}
console.timeEnd('loop');
})();
// а тут еще интереснее
(function() {
console.time('loop');
window.i = 0;
for (window.i; window.i < 1000000; window.i++) {}
console.timeEnd('loop');
})();
var o = {
i: 0
};
// и тут тоже интересно
(function() {
console.time('loop');
o.i = 0;
for (o.i; o.i < 1000000; o.i++) {}
console.timeEnd('loop');
})();
// и тут самое интересное!
(function() {
console.time('loop');
window.o.i = 0;
for (window.o.i; window.o.i < 1000000; window.o.i++) {}
console.timeEnd('loop');
})();