Vanilla nie oznacza automatycznie, że kod będzie szybszy. Frameworki mają wewnątrz siebie wiele zmyślnych technik optymalizacyjnych. Jedną z nich jest choćby dzielenie pracy na kilka części, by zmieścić się w jednej ramce. Zakłada się wówczas, że strona powinna działać w 60fps, co daje nam ok. 16ms na operacje. Jeśli framework widzi, że nie jest w stanie w tym czasie wszystkiego zrobić, dzieli prace na kawałki. W Reakcie jest za to odpowiedzialny Fiber, w Vue zapewne jest podobny mechanizm. Dodatkowo frameworki wykorzystują tzw. virtual DOM, czyli swoją wewnętrzną strukturę podobną do DOM, na której śledzą wszystkie zmiany zachodzące w prawdziwym DOM. Dzięki temu mogą obliczyć, w jaki sposób przejść od stanu A (np. strona z pustą listą dostępnych wydarzeń w okolicy) do stanu B (strona z wczytaną listą wydarzeń) w jak najmniejszej liczbie kroków. Dzięki połączeniu tych technik frameworki są w stanie dość wydajnie dokonywać nawet dużych zmian na stronach. Oczywiście coś za coś – czas samego wczytania strony się przez to wydłuża (frameworki swoje ważą) + zużycie pamięci jest wyższe.
W przypadku Vanilla tego typu optymalizacje trzeba robić samemu. Jedną z podstawowych zasad jest unikanie DOM-u tak długo, jak tylko się da. W Twoim kodzie odwołujesz się do DOM-u w pętli i, co gorsze, robisz to przy użyciu innerHTML. To sprawia, że za każdym przelotem pętli tak naprawdę nadpisujesz cały element #tablebody, co wymusza jego przerenderowanie przez przeglądarkę. Powinieneś stworzyć cały kod HTML jako po prostu string i dopiero na samym końcu wsadzić go do elementu:
let dane = jakasgrubatablicazdanymi;
let html = '';
for (let i = 0; i < dane.length ; i++) {
let elem = dane[i];
html += `<tr><td>${elem.id}</td> <td>${elem.date}</td> <td>${elem.nr}</td></tr>`;
}
document.querySelector('#tablebody').innerHTML = html;
Dzięki temu przerenderowanie elementu nastąpi tylko raz.
Istnieją też bardziej skomplikowane techniki optymalizacyjne, które można stosować przy vanilla JS, a które w dużej mierze sprowadzają się do wstrzelenia się z przerenderowaniem w odpowiedni moment. Niemniej samo ograniczenie operacji na DOM-ie powinno dać porządnego kopa, zwłaszcza w przypadku dużej liczby tych operacji.