¿Por qué está utilizando 'dejar' dentro de un` para ' loop tan lento en Chrome?

Actualización: Junio 2018: Chrome ahora optimiza esto mucho mejor de lo que lo hizo cuando esta pregunta y respuesta se publicaron por primera vez; ya no hay ninguna penalización apreciable por usar let en el for si no está creando funciones en el bucle (y si lo está, los beneficios valen la pena el costo).

Porque se crea un nuevo i para cada iteración del bucle, de modo que los cierres creados dentro del bucle se cierran sobre el i para esa iteración . Esto está cubierto por la especificación en el algoritmo para la evaluación de un cuerpo de bucle for , que describe la creación de un nuevo entorno variable por iteración de bucle.

Ejemplo:

for (let i = 0; i < 5; ++i) {
  setTimeout(function() {
    console.log("i = " + i);
  }, i * 50);
}

// vs.
setTimeout(function() {
  let j;
  for (j = 0; j < 5; ++j) {
    setTimeout(function() {
      console.log("j = " + j);
    }, j * 50);
  }
}, 400);

Eso es más trabajo. Si no necesita un nuevo i para cada bucle, use let fuera del bucle. Consulte la actualización anterior, no hay necesidad de evitarlo que no sean casos extremos.

Podemos esperar que ahora que todo menos módulos ha sido implementado, V8 lo hará probablemente mejore la optimización de las cosas nuevas, pero no es sorprendente que la funcionalidad deba priorizarse inicialmente sobre la optimización.

Es genial que otros motores ya hayan hecho la optimización, pero el equipo V8 aparentemente no ha llegado todavía. Ver actualización anterior.

@T. J. Crowder ya respondió a la pregunta del título, pero voy a responder a sus dudas.

Cuando me encontré con esto por primera vez pensé que era debido a la instancia recién creada de i, pero lo siguiente muestra que esto no es así.

En realidad, es debido al ámbito recién creado para la variable i. Que no está (todavía) optimizado ya que es más complicado que un simple alcance de bloque.

Ver el segundo fragmento de código como he eliminado cualquier posibilidad de que la declaración let adicional se optimice con ini con random y luego se agregue al valor indeterminado de k.

Su declaración adicional let j en

{let i; for (i = 0; i < 1e3; i ++) {let j = Math.random(); j += i; k += j;}}
// I'll ignore the `p` variable you had in your code

Fue optimizado hacia fuera . Eso es algo bastante trivial que hacer para un optimizador, puede evitar esa variable por completo simplificando su cuerpo de bucle a

k += Math.random() + i;

El ámbito no es realmente necesario a menos que cree cierres allí o use eval o similar abominación.

Si introducimos tal cierre (como código muerto, esperemos que el optimizador no se dé cuenta de eso) y pit

{let i; for (i=0; i < 1e3; i++) { let j=Math.random(); k += j+i; function f() { j; }}}

Contra

for (let i=0; i < 1e3; i++) { let j=Math.random(); k += j+i; function f() { j; }}

Entonces veremos que corren a la misma velocidad.

var times = [0,0]; // hold total times
var count = 0;  // number of tests
var soak = 0; // to stop optimizations
function test1(){
    var k = time[1];
    var start = performance.now();
    {let i; for(i=0; i < 1e3; i++){ let j=Math.random(); k += j+i; function f() { j; }}}
    times[0] += performance.now()-start;
    soak += k;
    setTimeout(test2,10)
}
function test2(){
    var k = time[1];
    var start = performance.now();
    for(let i=0; i < 1e3; i++){ let j=Math.random(); k += j+i; function f() { j; }}
    times[1] += performance.now()-start;
    soak += k;
    setTimeout(display,10)
}

// display results
function display(){
    var tot =times[0]+times[1];
    time.textContent = tot.toFixed(3)  + "ms";
    time1.textContent = ((times[0]/tot)*100).toFixed(2) + "% " + times[0].toFixed(3)  + "ms";
    time2.textContent = ((times[1]/tot)*100).toFixed(2) + "% " + times[1].toFixed(3) + "ms";
    if(count++ < 1000){
        setTimeout(test1,10);
    }
}
var div = document.createElement("div");
var div1 = document.createElement("div");
var div2 = document.createElement("div");
var time = document.createElement("span");
var time1 = document.createElement("span");
var time2 = document.createElement("span");
div.textContent = "Total execution time : "
div1.textContent = "Test 1 : "
div2.textContent = "Test 2 : "
div.appendChild(time);
div1.appendChild(time1);
div2.appendChild(time2);
document.body.appendChild(div);
document.body.appendChild(div1);
document.body.appendChild(div2);
display();