JavaScript Performance

📌 Elements

💡 Dasar Performa JavaScript

Optimasi performa adalah praktik membuat aplikasi JavaScript berjalan lebih cepat dan efisien dengan mengurangi waktu eksekusi, penggunaan memori, dan konsumsi sumber daya.

performance-basics.js

          
            // Mengukur waktu eksekusi

            console.time('loop');

            for (let i = 0; i < 1000000; i++) {

                // Operasi yang diukur

              }

              console.timeEnd('loop');

              // Mengurangi operasi DOM

              const fragment = document.createDocumentFragment();

              for (let i = 0; i < 100; i++) {

                  const div = document.createElement('div');

                  fragment.appendChild(div);

                }

                document.body.appendChild(fragment);

📝 Penjelasan Detail:

• console.time() - Mengukur waktu eksekusi kode
• DocumentFragment - Mengelompokkan operasi DOM untuk mengurangi reflow
• debounce/throttle - Mengoptimalkan event handlers yang sering dipanggil
• Web Workers - Menjalankan tugas berat di thread terpisah
• Lazy loading - Menunda pemuatan sumber daya yang tidak kritis

🛠️ Features

performance-features.js

          
            // Debounce untuk event scroll/resize

            function debounce(func, delay) {

              let timeoutId;

              return function() {

                clearTimeout(timeoutId);

                timeoutId = setTimeout(() => func.apply(this, arguments), delay);

              };

            }

            window.addEventListener('resize', debounce(() => {

              console.log('Resize handler');

            }, 200));

            // Web Worker untuk tugas berat

            const worker = new Worker('worker.js');

            worker.postMessage({ data: largeData });

            worker.onmessage = (e) => {

              console.log('Result from worker:', e.data);

            };

ℹ️ Teknik Optimasi

Beberapa teknik penting: minimifikasi kode, code splitting, caching, menggunakan algoritma yang efisien, dan menghindari memory leaks.

📊 Basic Tables

performance-comparison.js

          
            // Perbandingan Loop Performance (ops/detik)

            for           // 1,000,000 (tercepat)

            forEach       // 800,000

            for...of     // 600,000

            while        // 950,000

            map          // 500,000 (terlambat)

            // Perbandingan Query Selector

            getElementById       // Tercepat

            querySelector      // Cepat

            getElementsByClassName // Cepat

            querySelectorAll    // Sedang

            getElementsByTagName  // Sedang

📝 Penjelasan Detail:

• Loop Performance - For loop tradisional umumnya paling cepat
• DOM Queries - getElementById lebih cepat daripada querySelector
• Event Delegation mengurangi jumlah event listeners
• Memory Usage - Hindari menyimpan referensi yang tidak perlu
• Garbage Collection - Variabel global bertahan lebih lama

🚀 Advanced Table

advanced-performance.js

          
            // Virtual DOM dengan DocumentFragment

            function updateUI(data) {

              const fragment = document.createDocumentFragment();

              data.forEach(item => {

                const div = document.createElement('div');

                div.textContent = item.name;

                fragment.appendChild(div);

              });

              document.body.textContent = '';

              document.body.appendChild(fragment);

            }

            // Memoization untuk optimasi fungsi

            function memoize(fn) {

              const cache = {};

              return function(...args) {

                const key = JSON.stringify(args);

                if (cache[key]) return cache[key];

                const result = fn.apply(this, args);

                cache[key] = result;

                return result;

              };

            }

            const factorial = memoize(n => n <= 1 ? 1 : n * factorial(n - 1));

ℹ️ Teknik Lanjutan

Virtual DOM, memoization, algoritma caching, web assembly, service workers untuk caching offline, dan teknik rendering progresif.

💡 Pro Tips

🎯 Best Practices Performa

Ukur sebelum mengoptimasi, fokus pada bottleneck, gunakan tools profiling, optimalkan critical rendering path, dan hindari premature optimization.

performance-tips.js

          
            // ✅ Good - Event delegation

            document.addEventListener('click', (e) => {

              if (e.target.matches('.btn')) {

                handleClick(e.target);

              }

            });

            // ❌ Avoid - Banyak event listeners

            document.querySelectorAll('.btn').forEach(btn => {

              btn.addEventListener('click', handleClick);

            });

            // ✅ Better - RequestAnimationFrame untuk animasi

            function animate() {

              // Kode animasi

              requestAnimationFrame(animate);

            }

            requestAnimationFrame(animate);

📝 Penjelasan Detail:

• Gunakan event delegation - Kurangi jumlah event listeners
• Hindari forced synchronous layouts - Baca dan tulis DOM secara terpisah
• Gunakan requestAnimationFrame untuk animasi yang halus
• Minimalkan repaint/reflow - Batasi perubahan style yang mahal
• Gunakan Web Workers untuk tugas komputasi berat
• Lazy load resources - Tingkatkan waktu muat awal
• Monitor memory usage - Hindari memory leaks

🌐 Info

📚 Tools Analisis Performa

Chrome DevTools (Lighthouse, Performance tab), WebPageTest, Bundle Analyzer, Memory Profiler, dan berbagai library benchmarking.

📝 Sumber Belajar Lanjutan:

• Google Web Fundamentals - Panduan performa dari Google
• MDN Performance - Dokumentasi resmi Mozilla
• Web.dev - Artikel tentang optimasi modern
• JavaScript Performance Patterns - Buku dan tutorial
• Benchmark.js - Library untuk pengujian performa