concat vs loop - szybkość wykonywania się

Question

Zastanawia mnie dlaczego `.concat` w połączeniu tablicy A i B jest wolniejszy od przejechania pętlą po tablicy A i B i `.push`nięcie po kolei wszystkiego do tablicy C.

W skrócie:

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);

vs

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = [];

for(let i = 0, l = hege.length; i < l; i++) {
  children.push(hege[i]);
}
for(let i = 0, l = stale.length; i < l; i++) {
  children.push(stale[i]);
}

Różnica IMO jest dość spora bo concat 250k razy w 0.096s a loop ~1.4mln razy w 0.089s. Skąd taka spora różnica? Czy w takim wypadku powinno się w ogóle korzystać z tej funkcji .concat?

W tym przypadku gdzie łącze dwie takie małe tablice wiadomo, że nie ma wielkiej różnicy ale jakbym musiał łączyć kilka tablic, każda po 50k elementów w jakimś interwale to już mogłoby mieć znaczenie.

Jak ktoś chce uruchomić test samemu to można tutaj.

Answer 1

W tym przypadku gdzie łącze dwie takie małe tablice wiadomo, że nie ma wielkiej różnicy ale jakbym musiał łączyć kilka tablic, każda po 50k elementów w jakimś interwale to już mogłoby mieć znaczenie.

Ok, to teraz podaj mi realny przykład, w którym to robisz ;)

Ostateczną odpowiedź można by uzyskać albo zaglądając do kodu źródłowego silnika JS, albo patrząc na wygenerowany bytecode. Niemniej na chłopski rozum powiedziałbym, że przy concat przeglądarka musi znać obydwie tablice, podczas gdy przy push nie. W tym drugim przypadku po prostu powiększa length + zaznacza, do czego odnosi się nowy elementy tablicy. W przypadku concat powstaje równocześnie kopia połączonych tablic, podczas gdy push mutuje istniejące tablice (co sprawia, że pokazane kody nie są do końca równoważne!) – to również powoduje narzut.

Comments

Ok, to teraz podaj mi realny przykład, w którym to robisz ;)

No robie bota do pewnej gry desktopowej, w której mapa składa się z 5ciu "pod-map", każda ma 5k koordynatów x,y i muszę to złożyć do jednego żeby móc pathfinding uruchomić (niektóre koordynaty są kolizjami) . I często powtarzam te operacje bo kolizje są zmieniane realtime przez silnik gry. Wiem, że to prawdopodobnie rzadkie scenerio ale inaczej nie mogę tego zrobić.

---

No to w takim wypadku faktycznie lepiej wybrać wydajniejszy sposób.

---

W ogóle JS wydaje mi się zbyt mało wydajny :( `std::copy` w cpp daje dużo lepsze rezultaty

---

A i zauważyłem, że przy dużych tablicach ta różnica w pętli vs concat jest dużo mniejsza

---

Sprawdzałeś ze spread operatorem?

---

Nie sprawdzałem w projekcie, sprawdzałem w jsperf i pętla i tak była najszybsza. Ale zrobiłem coś innego w projekcie, zrzuciłem tą ciężką operację na inny wątek z webworkerem.

Answer 2

ja zrobiłem coś takiego:

function doSomething1(){
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
  for (let i = 1; i<100000;i++){
let children = [];
 
for(let i = 0, l = hege.length; i < l; i++) {
  children.push(hege[i]);
}
for(let i = 0, l = stale.length; i < l; i++) {
  children.push(stale[i]);
}
  }
};
function doSomething2(){
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
  for (let i = 1; i<100000;i++){
var children = hege.concat(stale);}
};




var t0 = performance.now();

doSomething1();   // <---- The function you're measuring time for 

var t1 = performance.now();
console.log("push took " + (t1 - t0) + " milliseconds.")

var t2 = performance.now();

doSomething2();   // <---- The function you're measuring time for 

var t3 = performance.now();
console.log("concat took " + (t3 - t2) + " milliseconds.")

console.log('----------------------------')

wynik:

• "push took 37.19000000273809 milliseconds."

• "concat took 43.91000000759959 milliseconds."

• "----------------------------"

• "push took 36.33500001160428 milliseconds."

• "concat took 43.75000001164153 milliseconds."

• "----------------------------"

• "push took 36.55000001890585 milliseconds."

• "concat took 44.18000002624467 milliseconds."