Pourquoi L'utilisation de " let "dans une boucle" for " Est-elle si lente sur Chrome?

mise à jour: juin 2018: Chrome optimise maintenant beaucoup mieux qu'il ne l'a fait lorsque cette question et Réponse ont été affichés pour la première fois; il n'y a plus de pénalité appréciable pour l'utilisation let dans le for si vous ne créez pas des fonctions dans la boucle (et si vous êtes, les avantages en valent la peine).

parce qu'un nouveau i est créé pour chaque itération de la boucle, de sorte que les fermetures ont créé à l'intérieur de la boucle, fermez le i pour cette itération . Ceci est couvert par la spécification dans l'algorithme pour évaluation d'un for corps de boucle , qui décrit la création d'un nouvel environnement variable par itération de boucle.

exemple:

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

C'est plus de travail. Si vous n'avez pas besoin d'un nouveau i pour chaque boucle, utilisez let en dehors de la boucle. voir Mise à jour ci-dessus, pas besoin de l'éviter autre que les cas de bord.

nous pouvons nous attendre à ce que maintenant que tout sauf les modules a été mis en œuvre, V8 va probablement améliorer l'optimisation de la nouvelle substance, mais il n'est pas surprenant que la fonctionnalité devrait d'abord être prioritaire sur l'optimisation.

il est grand que d'autres moteurs ont déjà fait le optimisation, mais l'équipe V8 n'est pas encore arrivée. Voir mise à jour ci-dessus.

@T. J. Crowder a déjà répondu à la question de titre, mais je vais répondre à vos doutes.

Quand j'ai rencontré cette je pensais que c'était à cause de l'instance nouvellement créée de je mais la suite montre que ce n'est pas ainsi.

en fait, c'est en raison de la portée nouvellement créée pour la variable i . Qui n'est pas (encore) optimisé car il est plus compliqué qu'un simple champ d'application de bloc .

voir le deuxième extrait de code car j'ai éliminé toute possibilité que la déclaration de let supplémentaire soit optimisée avec ini au hasard et ajoute ensuite à la valeur indéterminée de K.

votre déclaration supplémentaire let j dans

{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

a été optimisé sur . C'est une chose assez insignifiante à faire pour un optimiseur, il peut éviter que variable tout à fait en simplifiant votre corps de boucle à

k += Math.random() + i;

la portée n'est pas vraiment nécessaire à moins de créer des fermetures ou d'utiliser eval ou des abominations similaires.

si nous introduisons une telle fermeture (comme code mort, si tout va bien l'optimiseur ne s'en rend pas compte) et pit

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

contre

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

alors on verra qu'ils courent à peu près à la même vitesse.

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();