Warum verwendet "let" in einer "for" -Schleife in Chrome so langsam?
Dachte noch nicht an das Chrome Major Release das neue Zündung + Turbofan Motoren für Chrome Canary 59 hat das Problem gelöst. Testshow identische Zeiten fürlet
undvar
deklarierte Schleifenvariablen.
Original (jetzt stumm) Frage.
Beim Benutzenlet
in einemfor
loop in Chrome läuft sehr langsam, verglichen mit dem Verschieben der Variablen direkt außerhalb des Gültigkeitsbereichs der Schleife.
for(let i = 0; i < 1e6; i ++);
dauert doppelt so lange wie
{ let i; for(i = 0; i < 1e6; i ++);}
Was ist los
Snippet demonstriert den Unterschied und betrifft nur Chrome und ist es schon so lange, wie ich mich erinnern kann, dass Chrome @ unterstützlet
.
var times = [0,0]; // hold total times
var count = 0; // number of tests
function test(){
var start = performance.now();
for(let i = 0; i < 1e6; i += 1){};
times[0] += performance.now()-start;
setTimeout(test1,10)
}
function test1(){
// this function is twice as quick as test on chrome
var start = performance.now();
{let i ; for(i = 0; i < 1e6; i += 1);}
times[1] += performance.now()-start;
setTimeout(test2,10)
}
// display results
function test2(){
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(test,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);
test2()
Als ich das erste Mal darauf stieß, dachte ich, es liege an der neu erstellten Instanz von i, aber das Folgende zeigt, dass dem nicht so ist.
Siehe Code-Snippet, da ich jede Möglichkeit beseitigt habe, die zusätzliche let-Deklaration mit ini mit random zu optimieren und dann den unbestimmten Wert von k zu addieren.
Ich habe auch einen zweiten Schleifenzähler hinzugefügtp
var times = [0,0]; // hold total times
var count = 0; // number of tests
var soak = 0; // to stop optimizations
function test(){
var j;
var k = time[1];
var start = performance.now();
for(let p =0, i = 0; i+p < 1e3; p++,i ++){j=Math.random(); j += i; k += j;};
times[0] += performance.now()-start;
soak += k;
setTimeout(test1,10)
}
function test1(){
// this function is twice as quick as test on chrome
var k = time[1];
var start = performance.now();
{let p,i ; for(p = 0,i = 0; i+p < 1e3; p++, i ++){let j = Math.random(); j += i; k += j}}
times[1] += performance.now()-start;
soak += k;
setTimeout(test2,10)
}
// display results
function test2(){
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(test,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);
test2()