logo

Zpráva o výkonu Svelte VS ReactJS

Několik dní před zveřejněním příspěvku na Svelt Needs A Virtual DOM . Možná byla z mé strany ve stejném příspěvku jakási nejasnost. Abychom to dále objasnili, zprávy jsou připojeny zde.

Podobný kód, který byl spuštěn na obou rámcích, byl tento,
*Nevadí, že nepoužíváte smyčky ES6. To je způsobeno přechodem ze stránek jsperf 

  updateString = () => {
    let outerIncrement = 0;
    let increment = 0;
    do {
      do {
        this.longStringPre += "String number:" + increment++;
      } while (increment < 1000);
      outerIncrement++;
   } while (outerIncrement < 1000);
  }

  componentDidMount = function () {
    this.updateString();
    setTimeout(this.setState.bind(this, {
      longString1: this.longStringPre,
    }), 1000);
    setTimeout(this.setState.bind(this, { longString2: this.longStringPre }), 3000);
    setTimeout(this.setState.bind(this, { longString3: this.longStringPre, 2000);
    setTimeout(this.setState.bind(this, { longString4: this.longStringPre }), 1500);
  }

A HTML jako něco takového, 

<div className="App2">
        <div>hello</div>
        <div><div>{this.state.longString1}</div></div>
        <div><div><div>{this.state.longString2}</div>{this.state.longString3}</div></div>
        <div><span>{this.state.longString4}</span><span>{this.state.longString2.split(":").join("--")}</span></div>
        <div><div><div></div>{this.state.longString2.split(":").join("-")}</div></div>
        <div><div>{this.state.longString2.split(":").join("||")}<div></div>{this.state.longString1}</div></div>
        <p><span>{this.state.longString1.split(":").join("=")}</span></p>
</div>

To byl reaktjs kód a přesně stejný kód se stejnými časovými limity a Html strukturou byl následován štíhlým kódem.

Proč je testovací kód tak složitý?

Protože je vynaloženo úsilí na replikaci scénáře, kde více hovorů ajax odpovídá téměř ve stejnou dobu. Většina našich aplikací má řadu ajaxových volání, která skončí ve stejnou dobu, zejména na řídicím panelu, který obsahuje více grafů, nebo když dojde k velkým živým aktualizacím.

Pro pochopení testovacího kódu

  • Čtyři řetězce longString1, longString2,longString3 & longString4 aktualizovat v různých časových intervalech.

  • V HTML, například longString2 se aktualizuje pro každou jinou pozici na domku. To proto, aby oba rámce neuvažovaly o duplikaci. Protože obvykle nemáme duplicitní data, když reagují různá volání ajax.

  • Vnořený model DOM s více div je to proto, že samotný Reactjs porovnává strom před aktualizací DOM. Pokud odstraním vnořený DOM, bude Svelt fungovat lépe. Ale v našich aplikacích máme vnořený DOM.

Zde jsou konzistentní výsledky z více pokusů.
Štíhlý snímek obrazovky 1

Reagovat screenshot1

Úhledný snímek obrazovky 2

Reagovat screenshot2

Protože mluvíme o virtuálním DOM, měli bychom zvážit časování DOM &Layout. Na snímcích obrazovky můžeme pozorovat, že ReactJS má oproti Svelte dobrou výhodu.

A jednu věc si zapamatujte, čtení DOM není drahé, ale zápis DOM ano. Protože při zápisu se strom musí sám restrukturalizovat.

Celý příběh je založen pouze na - cokoli, co se stane v rámci javascriptového enginu, má mnohem nižší náklady než komunikace s DOM, který je provozován jiným enginem (prohlížecím enginem).

Neváhejte se vyjádřit a diskutovat o tomtéž. Děkujeme za váš čas.