Kas yra greičiau: DOM ar Virtual DOM?

Tiesioginis palyginimas DOM ir Virtual DOM našumu nėra teisingas. Virtualus DOM yra pats lėtesnis, nes jis yra abstrakcija virš natūralaus DOM ir reikalauja skaičiavimų medžių kūrimui ir palyginimui. Tačiau scenarijuose, kai dažnai keičiasi naudotojo sąsaja, Virtual DOM kartu su difingo ir pachingo algoritmais gali būti greitesnis nei tiesioginės manipuliacijos natūraliu DOM, nes minimalizuoja brangias rašymo operacijas į realų DOM:

Virtualus DOM veikia taip:

1. Kai duomenys keičiasi, kuriamas naujas Virtual DOM medis.
2. Lyginamas naujas medis su ankstesniu (diffing).
3. Apskaičiuojami minimalūs pakeitimai, reikalingi realiam DOM atnaujinimui.
4. Taikomi tik šie minimalūs pakeitimai realiam DOM (patching).

Tiesioginės manipuliacijos DOM be optimizacijos gali būti lėtos dėl:

• stilių peržiūrėjimo ir puslapio perpiešimo kiekvieno pakeitimo metu;
• būtinybės pereiti per realų DOM, ieškant elementų;

Palyginimą galima pateikti taip:

Operacija	DOM (tiesioginės manipuliacijos)	Virtualus DOM (naudojant React/Vue ir kt.)
Medžio kūrimas	Netaikoma (darbas tiesiogiai su esamu medžiu)	Reikalingas laikas objektui sukurti atmintyje
Atnaujinimas	Gali būti greitas vienkartiniams pakeitimams, bet brangus daugkartiniams ir dažniems dėl perpiešimo	Reikalingas laikas kurti naują VDOM, difingu ir paching, bet optimizuoja rašymo išlaidas į realų DOM masinių pakeitimų atveju
Atmintis	Santykinai mažas suvartojimas (jei nėra saugomos nuorodos į daugelį elementų)	Reikalauja papildomos atminties VDOM medžio saugojimui
Kodo sudėtingumas	Gali būti aukštas sudėtingiems sąsajoms su daugybe dinamiškų elementų	Supaprastina valdymą, palengvina būsenos ir atnaujinimų valdymą

Pavyzdys tiesioginės manipuliacijos DOM:

// Elemento gavimas
const element = document.getElementById('myElement');

// Kiekvienas pakeitimas gali sukelti stilių peržiūrėjimą ir puslapio perpiešimą
element.textContent = 'Naujas tekstas';
element.style.color = 'raudona';
element.classList.add('aktyvus');

React pavyzdys (naudojant Virtual DOM):

// React automatiškai valdo DOM atnaujinimus per Virtual DOM
function MyComponent({ text, color, active }) {
  return (
    <div
      id="myElement"
      style={{ color: color }}
      className={active ? 'aktyvus' : ''}
    >
      {text}
    </div>
  );
}

Galima sakyti, kad nors Virtual DOM turi papildomų išlaidų, jo architektūra ir optimizavimo algoritmai leidžia jį padaryti efektyvesnį šiuolaikiniuose sudėtinguose tinklalapiuose, kuriuose dažnai ir masiškai keičiasi UI. Paprastais atvejais, retai keičiasi, tiesioginis prieiga prie DOM gali būti greitesnė.