Benchmark JavaScript Modern: Vue, React, dan jQuery

Di dunia pengembangan web modern, performa JavaScript menjadi faktor krusial, terutama ketika aplikasi harus menangani ribuan elemen di DOM secara real-time. Framework dan library JavaScript memiliki pendekatan berbeda untuk update DOM, dan perbedaan ini sangat terlihat ketika kita melakukan ribuan perubahan dalam satu operasi.

Untuk memahami perbedaan performa ini, kita melakukan benchmark sederhana: mengupdate sebuah counter sebanyak 10.000 kali di masing-masing framework/library populer: Vue, React, dan jQuery.

Hasil Benchmark

Berikut adalah hasil benchmark yang kami jalankan:

Langsung terlihat bahwa Vue paling cepat, diikuti React, dan jQuery jauh lebih lambat dibanding framework modern. Namun, untuk memahami kenapa perbedaan ini terjadi, kita perlu meninjau bagaimana masing-masing library/framework menangani DOM.

---

1. Vue.js: Reactive dan Efisien

Vue.js adalah framework progresif yang memudahkan developer membuat antarmuka interaktif. Salah satu fitur unggulannya adalah reactivity system yang terintegrasi secara otomatis.

Bagaimana Vue Update DOM?

Vue menggunakan reactive system dan batch update:

1. Reactive Data Binding:
   Saat kita mendeklarasikan state dengan ref atau reactive, Vue memonitor perubahan secara otomatis.

2. Batch Update:
   Jika ada banyak perubahan state dalam satu event loop, Vue menggabungkan update sehingga DOM diupdate hanya sekali per frame, bukan setiap perubahan.

3. Virtual DOM:
   Vue membuat representasi virtual dari DOM dan hanya melakukan patch pada bagian yang berubah. Ini membuat update ribuan elemen sangat cepat.

Analisis Hasil

Dalam benchmark:

Artinya, Vue berhasil melakukan 10.000 perubahan dalam 2 milidetik. Kecepatan ini sangat mengesankan dan menunjukkan bahwa reactive system + batching + virtual DOM bekerja sangat efisien.

Kelebihan Vue

• Update DOM cepat untuk ribuan elemen.

• Sintaks ringkas dan mudah dipelajari.

• Reactive system otomatis → tidak perlu menulis manual DOM manipulation.

• Cocok untuk SPA (Single Page Application) maupun proyek kecil.

Kapan Vue Terbaik?

• Aplikasi dengan banyak interaksi real-time.

• Proyek yang ingin developer-friendly, cepat setup, dan maintainable.

---

2. React: Virtual DOM dan Lifecycle

React adalah library yang dikembangkan oleh Meta (Facebook) dan terkenal dengan component-based architecture. React juga menggunakan Virtual DOM untuk mengoptimalkan update DOM.

Bagaimana React Update DOM?

1. State dan Props:
   React memisahkan data menjadi state dan props. Setiap perubahan state memicu re-render component terkait.

2. Virtual DOM:
   React membuat virtual representation dari DOM, membandingkan DOM sebelumnya dengan yang baru (diffing), lalu mengupdate hanya elemen yang berubah.

3. Batching Updates:
   React 18 memperkenalkan automatic batching untuk beberapa event asynchronous. Namun, jika update dilakukan dalam loop sinkron, React masih melakukan banyak re-render.

Analisis Hasil

React lebih lambat dari Vue dalam benchmark ini. Alasannya:

• React melakukan diffing untuk setiap re-render.

• Meskipun efficient, diffing menambah overhead untuk update ribuan elemen.

• Pada kasus ribuan update sederhana, Vue lebih efisien karena reactive system-nya langsung menarget elemen yang berubah.

Kelebihan React

• Ekosistem besar dan stabil.

• Component-based → code reuse tinggi.

• Mendukung server-side rendering (Next.js) dan berbagai tools modern.

• Lebih predictable lifecycle → baik untuk aplikasi kompleks.

Kapan React Terbaik?

• Proyek besar dan kompleks.

• Aplikasi yang butuh ekosistem besar: routing, state management, SSR.

• Tim developer familiar dengan component-based architecture.

---

3. jQuery: Library Klasik

jQuery pernah menjadi raja JavaScript di era sebelum framework modern populer. jQuery mempermudah manipulasi DOM dan event handling, tetapi tidak memiliki reactive system atau Virtual DOM.

Bagaimana jQuery Update DOM?

• Semua perubahan dilakukan langsung ke DOM.

• Tidak ada batch update atau diffing → setiap perubahan memicu repaint di browser.

• Loop ribuan update membuat browser bekerja ekstra keras.

Analisis Hasil

Hasil ini menunjukkan jQuery paling lambat dibanding Vue dan React. Alasan utama:

• DOM update langsung tiap iterasi → overhead besar.

• Tidak ada sistem reactive → developer harus manual mengelola perubahan.

• Tidak scalable untuk ribuan elemen update real-time.

Kelebihan jQuery

• Sangat mudah dipelajari dan langsung bisa dipakai di proyek kecil.

• Cocok untuk DOM manipulation sederhana.

• Kompatibel dengan browser lama.

Kapan jQuery Terbaik?

• Proyek kecil dengan interaksi sederhana.

• Legacy project yang masih mengandalkan jQuery.

---

4. Perbandingan Arsitektur

Dari tabel terlihat jelas Vue unggul dalam update ribuan elemen, React cukup cepat, sedangkan jQuery kalah jauh.

---

5. Kenapa Performa Vue Lebih Cepat

Beberapa alasan teknis mengapa Vue lebih cepat dibanding React/jQuery pada benchmark update 10.000x:

1. Reactive System Efisien

   • Vue men-track setiap dependency state → hanya elemen yang berubah yang di-update.

2. Batching Update

   • Vue menggabungkan update dalam satu frame → mengurangi repaint dan reflow browser.

3. Virtual DOM Optimized

   • Vue melakukan patching selektif, bukan diff seluruh tree seperti React pada beberapa kondisi loop sinkron.

Sebaliknya, jQuery selalu update DOM langsung → overhead tinggi. React lebih efisien dari jQuery tapi masih ada diffing overhead.

---

6. Implikasi Praktis

Untuk Developer

• Jika aplikasi banyak update DOM → Vue atau framework reactive modern lebih efisien.

• Jika aplikasi komponen kompleks + ekosistem luas → React tetap menarik.

• Jika aplikasi sederhana + kompatibilitas lama → jQuery masih cukup.

Untuk Performa

• Reactive + batch update = kunci performa tinggi pada ribuan update DOM.

• Virtual DOM → baik, tapi masih ada diffing overhead (React).

• Direct DOM manipulation = lambat untuk ribuan update (jQuery).

---

7. Contoh Kode Benchmark

Vue

React

jQuery

---

8. Kesimpulan

1. Vue unggul dalam update DOM ribuan elemen → 2 ms untuk 10.000 update.

2. React cukup cepat → 14 ms, tapi sedikit lebih lambat karena diffing overhead.

3. jQuery paling lambat → 59 ms, karena update DOM langsung tiap iterasi.

Pesan utama:

• Untuk aplikasi modern dengan banyak interaksi, gunakan framework reactive seperti Vue atau React.
• jQuery masih cocok untuk proyek kecil, tapi bukan pilihan terbaik untuk aplikasi real-time yang membutuhkan performa tinggi.

---

Dengan benchmark ini, terlihat jelas bagaimana arsitektur framework mempengaruhi performa update DOM. Reactive + batch update adalah kunci performa tinggi.

Update benchmark V2

Sebeneranya ujicoba performa diatas masih data kecil kalau data uji dinaikan dan kode logika diperbaiki sehingga maksimalkan speed render UI masing2 dengan hasil:

Hasil framework JS react No.2 dan Jquery no.1 dan Vue no.3 tertinggal angka lebih lambat, tentunya logika program sangat berpengaruh disini.

berikut kode sample benchmark:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Benchmark Vue vs React vs jQuery with Progress</title>

<!-- Library -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<style>
body { font-family: sans-serif; margin: 20px; }
.section { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }
h2 { margin-top: 0; }
progress { width: 100%; height: 20px; margin-top: 5px; }
</style>
</head>
<body>

<!-- Vue -->
<div class="section" id="vueApp">
<h2>Vue Benchmark</h2>
<p>Count: {{ count }}</p>
<progress :value="count" max="100000"></progress>
<button @click="runTest">Run 100,000 Updates</button>
</div>
<p id="vueTime"></p>

<!-- React -->
<div class="section">
<h2>React Benchmark</h2>
<div id="reactApp"></div>
</div>
<p id="reactTime"></p>

<!-- jQuery -->
<div class="section">
<h2>jQuery Benchmark</h2>
<p id="jqCount">Count: 0</p>
<progress id="jqProgress" value="0" max="100000"></progress>
<button id="jqBtn">Run 100,000 Updates</button>
</div>
<p id="jqTime"></p>

<script>
// ===== Vue =====
const { createApp, ref } = Vue;
createApp({
setup() {
const count = ref(0);
const total = 100000;
const batchSize = 1000;

const runTest = () => {
const start = performance.now();
let current = 0;

function updateBatch() {
const endBatch = Math.min(current + batchSize, total);
for (; current < endBatch; current++) count.value = current;
if (current < total) {
setTimeout(updateBatch, 0);
} else {
const end = performance.now();
document.getElementById('vueTime').textContent = `Vue: ${Math.round(end - start)} ms`;
}
}

updateBatch();
}

return { count, runTest };
}
}).mount('#vueApp');

// ===== React =====
const e = React.createElement;
function ReactCounter() {
const [count, setCount] = React.useState(0);
const total = 100000;
const batchSize = 1000;

const runTest = () => {
const start = performance.now();
let current = 0;

function updateBatch() {
const endBatch = Math.min(current + batchSize, total);
for (; current < endBatch; current++) setCount(current);
if (current < total) {
setTimeout(updateBatch, 0);
} else {
const end = performance.now();
document.getElementById('reactTime').textContent = `React: ${Math.round(end - start)} ms`;
}
}

updateBatch();
}

return e('div', null,
e('p', null, `Count: ${count}`),
e('progress', { value: count, max: total }),
e('button', { onClick: runTest }, 'Run 100,000 Updates')
);
}
ReactDOM.createRoot(document.getElementById('reactApp')).render(e(ReactCounter));

// ===== jQuery =====
$('#jqBtn').click(() => {
let count = 0;
const total = 100000;
const batchSize = 1000;
const start = performance.now();

function updateBatch() {
const endBatch = Math.min(count + batchSize, total);
for (; count < endBatch; count++) {}

$('#jqCount').text(count);
$('#jqProgress').val(count);

if (count < total) {
setTimeout(updateBatch, 0);
} else {
const end = performance.now();
const elapsed = Math.round(end - start);
$('#jqTime').text(`jQuery : ${elapsed} ms`);
}
}

updateBatch();
});
</script>

</body>
</html>