Najefektívnejší spôsob spájania reťazcov v JavaScripte?

V JavaScripte mám slučku s mnohými iteráciami a v každej iterácii vytváram obrovský reťazec s mnohými += operátormi. Existuje efektívnejší spôsob, ako vytvoriť reťazec? Premýšľal som o vytvorení dynamického poľa, kde by som doň neustále pridával reťazce a potom spravil spojenie. Vie mi niekto vysvetliť a uviesť príklad najrýchlejšieho spôsobu, ako to urobiť?

Odpoveď č. 1

Zdá sa, že na základe benchmarkov na JSPerf je použitie += najrýchlejšia metóda, hoci nie nevyhnutne vo všetkých prehliadačoch.

Pre budovanie reťazcov v DOM sa zdá byť lepšie najprv reťazec spojiť a potom ho pridať do DOM, namiesto toho, aby sa iteratívne pridával do DOM. Mali by ste však otestovať svoj vlastný prípad.

(Ďakujem @zAlbee za opravu)

Odpoveď č. 2

Nemám žiadny komentár k samotnému zreťazeniu, ale rád by som poukázal na návrh @Jakub Hampl:

Pri budovaní reťazcov v DOM môže byť v niektorých prípadoch lepšie postupne pridávať do DOM, než pridať veľký reťazec naraz.

je nesprávny, pretože je založený na chybných testoch. Ten test sa v skutočnosti nikdy nepridáva do DOM.

Táto pevná skúška ukazuje, že vytvorenie reťazca naraz pred jeho vykreslením je oveľa, OVEĽA rýchlejšie. Nie je to ani súťaž.

(Prepáčte, toto je samostatná odpoveď, ale ešte nemám dosť reputácie na to, aby som mohol komentovať odpovede.)

Odpoveď č. 3

Ubehli tri roky od tejto otázky, odkedy bola zodpovedaná, ale aj tak poskytnem svoju odpoveď :)

V skutočnosti nie je prijatá odpoveď úplne správna. Jakubov test používa pevne zakódovaný reťazec, čo umožňuje JS engine optimalizovať vykonávanie kódu (Google V8 je v tom naozaj dobrý!). Ale hneď ako použijete úplne náhodné reťazce (tu je JSPerf), potom bude spájanie reťazcov až na druhom mieste.

Odpoveď č. 4

Urobil som rýchly test v Node aj v Chromu a zistil som, že v oboch prípadoch je += rýchlejší:

var profile = func => { 
    var start = new Date();
    for (var i = 0; i < 10000000; i++) func('test');
    console.log(new Date() - start);
}
profile(x => "testtesttesttesttest");
profile(x => `${x}${x}${x}${x}${x}`);
profile(x => x + x + x + x + x );
profile(x => { var s = x; s += x; s += x; s += x; s += x; return s; });
profile(x => [x, x, x, x, x].join(""));
profile(x => { var a = [x]; a.push(x); a.push(x); a.push(x); a.push(x); return a.join(""); });

výsledky v uzle: 7.0.10

  • úloha: 8
  • šablónové literály: 524
  • plus: 382
  • plus sa rovná: 379
  • spojenie poľa: 1476
  • pole push join: 1651

výsledky z Chrome 86.0.4240.198:

  • úloha: 6
  • šablónové literály: 531
  • plus: 406
  • plus sa rovná: 403
  • spojenie poľa: 1552
  • pole push join: 1813

Odpoveď #5

S reťazcami môžete tiež spájať pomocou šablónových literálov. Aktualizoval som testy JSPerf od ostatných prispievateľov, aby ich obsahovali.

for (var res = '', i = 0; i < data.length; i++) {
  res = `${res}${data[i]}`;
}

Súvisiace články