Kumpulan Thread Web Workers: Distribusi Tugas Latar Belakang dan Penyeimbangan Beban

Dalam aplikasi web yang kompleks saat ini, menjaga responsivitas sangat penting untuk memberikan pengalaman pengguna yang positif. Operasi yang intensif secara komputasi atau melibatkan penungguan sumber daya eksternal (seperti permintaan jaringan atau kueri basis data) dapat memblokir thread utama, yang menyebabkan UI membeku dan terasa lambat. Web Workers menawarkan solusi yang kuat dengan memungkinkan Anda menjalankan kode JavaScript di thread latar belakang, membebaskan thread utama untuk pembaruan UI dan interaksi pengguna.

Namun, mengelola beberapa Web Workers secara langsung bisa menjadi rumit, terutama saat menangani volume tugas yang tinggi. Di sinilah konsep kumpulan thread Web Workers berperan. Kumpulan thread menyediakan koleksi Web Workers terkelola yang dapat diberi tugas secara dinamis, mengoptimalkan penggunaan sumber daya dan menyederhanakan distribusi tugas latar belakang.

Apa itu Kumpulan Thread Web Workers?

Kumpulan thread Web Workers adalah pola desain yang melibatkan pembuatan sejumlah Web Workers yang tetap atau dinamis dan mengelola siklus hidupnya. Alih-alih membuat dan menghancurkan Web Workers untuk setiap tugas, kumpulan thread memelihara sekelompok pekerja yang tersedia yang dapat digunakan kembali. Ini secara signifikan mengurangi overhead yang terkait dengan pembuatan dan penghentian worker, yang mengarah pada peningkatan kinerja dan efisiensi sumber daya.

Anggap saja seperti tim pekerja khusus, masing-masing siap untuk menangani jenis tugas tertentu. Alih-alih merekrut dan memberhentikan pekerja setiap kali Anda membutuhkan sesuatu, Anda memiliki tim yang siap dan menunggu untuk diberi tugas saat tersedia.

Manfaat Menggunakan Kumpulan Thread Web Workers

• Peningkatan Kinerja: Menggunakan kembali Web Workers mengurangi overhead yang terkait dengan pembuatan dan penghancurannya, yang mengarah pada eksekusi tugas yang lebih cepat.
• Manajemen Tugas yang Disederhanakan: Kumpulan thread menyediakan mekanisme terpusat untuk mengelola tugas latar belakang, menyederhanakan arsitektur aplikasi secara keseluruhan.
• Penyeimbangan Beban: Tugas dapat didistribusikan secara merata di antara pekerja yang tersedia, mencegah pekerja tunggal mana pun menjadi kelebihan beban.
• Optimalisasi Sumber Daya: Jumlah pekerja dalam kumpulan dapat disesuaikan berdasarkan sumber daya yang tersedia dan beban kerja, memastikan penggunaan sumber daya yang optimal.
• Peningkatan Responsivitas: Dengan memindahkan tugas-tugas yang intensif secara komputasi ke thread latar belakang, thread utama tetap bebas untuk menangani pembaruan UI dan interaksi pengguna, menghasilkan aplikasi yang lebih responsif.

Mengimplementasikan Kumpulan Thread Web Workers

Mengimplementasikan kumpulan thread Web Workers melibatkan beberapa komponen kunci:

1. Pembuatan Worker: Buat kumpulan Web Workers dan simpan dalam array atau struktur data lainnya.
2. Antrean Tugas: Pertahankan antrean tugas yang menunggu untuk diproses.
3. Penugasan Tugas: Saat seorang pekerja tersedia, berikan tugas dari antrean ke pekerja tersebut.
4. Penanganan Hasil: Saat seorang pekerja menyelesaikan tugas, ambil hasilnya dan beri tahu fungsi callback yang sesuai.
5. Daur Ulang Worker: Setelah seorang pekerja menyelesaikan tugas, kembalikan ke kumpulan untuk digunakan kembali.

Berikut adalah contoh sederhana dalam JavaScript:

            
class ThreadPool {
  constructor(size) {
    this.size = size;
    this.workers = [];
    this.taskQueue = [];
    this.availableWorkers = [];

    for (let i = 0; i < size; i++) {
      const worker = new Worker('worker.js'); // Pastikan worker.js ada dan berisi logika worker
      worker.onmessage = (event) => {
        const { taskId, result } = event.data;
        // Tangani hasilnya, mis., selesaikan promise yang terkait dengan tugas
        this.taskCompletion(taskId, result, worker);
      };
      worker.onerror = (error) => {
        console.error('Worker error:', error);
        // Tangani error, berpotensi menolak promise
        this.taskError(error, worker);
      };
      this.workers.push(worker);
      this.availableWorkers.push(worker);
    }
  }

  enqueue(task, taskId) {
    return new Promise((resolve, reject) => {
      this.taskQueue.push({ task, resolve, reject, taskId });
      this.processTasks();
    });
  }

  processTasks() {
    while (this.availableWorkers.length > 0 && this.taskQueue.length > 0) {
      const worker = this.availableWorkers.shift();
      const { task, resolve, reject, taskId } = this.taskQueue.shift();
      worker.postMessage({ task, taskId }); // Kirim tugas dan taskId ke worker
    }
  }

  taskCompletion(taskId, result, worker) {
    // Temukan tugas di antrean (jika diperlukan untuk skenario kompleks)
    // Selesaikan promise yang terkait dengan tugas
    const taskData = this.workers.find(w => w === worker);

    // Tangani hasilnya (mis., perbarui UI)
    // Selesaikan promise yang terkait dengan tugas
    const taskIndex = this.taskQueue.findIndex(t => t.taskId === taskId);
    if(taskIndex !== -1){
        this.taskQueue.splice(taskIndex, 1); //hapus tugas yang sudah selesai
    }
    this.availableWorkers.push(worker);
    this.processTasks();

    // Selesaikan promise yang terkait dengan tugas menggunakan hasilnya
  }

  taskError(error, worker) {
      //Tangani error dari worker di sini
      console.error("task error", error);
      this.availableWorkers.push(worker);
      this.processTasks();
  }
}

// Contoh penggunaan:
const pool = new ThreadPool(4); // Buat kumpulan 4 worker

async function doWork() {
  const task1 = pool.enqueue({ action: 'calculateSum', data: [1, 2, 3, 4, 5] }, 'task1');
  const task2 = pool.enqueue({ action: 'multiply', data: [2, 3, 4, 5, 6] }, 'task2');
  const task3 = pool.enqueue({ action: 'processImage', data: 'image_data' }, 'task3');
  const task4 = pool.enqueue({ action: 'fetchData', data: 'https://example.com/data' }, 'task4');

  const results = await Promise.all([task1, task2, task3, task4]);
  console.log('Results:', results);
}

doWork();

            

              
                Copy
              
            
          

worker.js (contoh skrip worker):

            
self.onmessage = (event) => {
  const { task, taskId } = event.data;
  let result;

  switch (task.action) {
    case 'calculateSum':
      result = task.data.reduce((a, b) => a + b, 0);
      break;
    case 'multiply':
      result = task.data.reduce((a, b) => a * b, 1);
      break;
    case 'processImage':
      // Simulasikan pemrosesan gambar (ganti dengan logika pemrosesan gambar yang sebenarnya)
      result = 'Image processed successfully!';
      break;
    case 'fetchData':
      //Simulasikan pengambilan data
      result = 'Data fetched successfully';
      break;
    default:
      result = 'Unknown action';
  }

  self.postMessage({ taskId, result }); // Kirim hasilnya kembali ke thread utama, termasuk taskId
};

            

              
                Copy
              
            
          

Penjelasan Kode:

• Kelas ThreadPool:
  • Konstruktor: Menginisialisasi kumpulan thread dengan ukuran yang ditentukan. Ini membuat jumlah pekerja yang ditentukan, melampirkan event listener `onmessage` dan `onerror` ke setiap pekerja untuk menangani pesan dan kesalahan dari pekerja, dan menambahkannya ke array `workers` dan `availableWorkers`.
  • enqueue(task, taskId): Menambahkan tugas ke `taskQueue`. Ini mengembalikan sebuah `Promise` yang akan diselesaikan dengan hasil tugas atau ditolak jika terjadi kesalahan. Tugas ditambahkan ke antrean bersama dengan `resolve`, `reject`, dan `taskId`
  • processTasks(): Memeriksa apakah ada pekerja yang tersedia dan tugas di antrean. Jika ya, ia mengeluarkan seorang pekerja dan tugas dari antrean dan mengirimkan tugas ke pekerja menggunakan `postMessage`.
  • taskCompletion(taskId, result, worker): Metode ini dipanggil ketika seorang pekerja menyelesaikan tugas. Ia mengambil tugas dari `taskQueue`, menyelesaikan `Promise` yang terkait dengan hasilnya, dan menambahkan pekerja kembali ke array `availableWorkers`. Kemudian ia memanggil `processTasks()` untuk memulai tugas baru jika tersedia.
  • taskError(error, worker): Metode ini dipanggil ketika seorang pekerja mengalami kesalahan. Ini mencatat kesalahan, menambahkan pekerja kembali ke array `availableWorkers`, dan memanggil `processTasks()` untuk memulai tugas baru jika tersedia. Penting untuk menangani kesalahan dengan benar untuk mencegah aplikasi mogok.
• Skrip Worker (worker.js):
  • onmessage: Event listener ini dipicu ketika pekerja menerima pesan dari thread utama. Ia mengekstrak tugas dan taskId dari data event.
  • Pemrosesan Tugas: Pernyataan `switch` digunakan untuk menjalankan kode yang berbeda berdasarkan `action` yang ditentukan dalam tugas. Ini memungkinkan pekerja untuk melakukan berbagai jenis operasi.
  • postMessage: Setelah memproses tugas, pekerja mengirimkan hasilnya kembali ke thread utama menggunakan `postMessage`. Hasilnya mencakup taskId yang penting untuk melacak tugas dan promise masing-masing di thread utama.

Pertimbangan Penting:

• Penanganan Kesalahan: Kode ini mencakup penanganan kesalahan dasar di dalam pekerja dan di thread utama. Namun, strategi penanganan kesalahan yang kuat sangat penting di lingkungan produksi untuk mencegah crash dan memastikan stabilitas aplikasi.
• Serialisasi Tugas: Data yang diteruskan ke Web Workers harus dapat diserialisasi. Ini berarti bahwa data harus diubah menjadi representasi string yang dapat ditransmisikan antara thread utama dan pekerja. Objek yang kompleks mungkin memerlukan teknik serialisasi khusus.
• Lokasi Skrip Worker: File `worker.js` harus disajikan dari asal yang sama dengan file HTML utama, atau CORS harus dikonfigurasi dengan benar jika skrip pekerja berada di domain yang berbeda.

Strategi Penyeimbangan Beban

Penyeimbangan beban adalah proses mendistribusikan tugas secara merata di antara sumber daya yang tersedia. Dalam konteks kumpulan thread Web Workers, penyeimbangan beban memastikan bahwa tidak ada satu pun pekerja yang menjadi kelebihan beban, memaksimalkan kinerja dan responsivitas secara keseluruhan.

Berikut adalah beberapa strategi penyeimbangan beban yang umum:

• Round Robin: Tugas diberikan kepada pekerja secara bergiliran. Ini adalah strategi yang sederhana dan efektif untuk mendistribusikan tugas secara merata.
• Least Connections: Tugas diberikan kepada pekerja dengan koneksi aktif paling sedikit (yaitu, tugas yang sedang diproses paling sedikit). Strategi ini bisa lebih efektif daripada round robin ketika tugas memiliki waktu eksekusi yang bervariasi.
• Weighted Load Balancing: Setiap pekerja diberi bobot berdasarkan kapasitas pemrosesannya. Tugas diberikan kepada pekerja berdasarkan bobot mereka, memastikan bahwa pekerja yang lebih kuat menangani proporsi beban kerja yang lebih besar.
• Dynamic Load Balancing: Jumlah pekerja dalam kumpulan disesuaikan secara dinamis berdasarkan beban kerja saat ini. Strategi ini bisa sangat efektif ketika beban kerja sangat bervariasi dari waktu ke waktu. Ini mungkin melibatkan penambahan atau penghapusan pekerja dari kumpulan berdasarkan utilisasi CPU atau panjang antrean tugas.

Contoh kode di atas mendemonstrasikan bentuk dasar penyeimbangan beban: tugas diberikan kepada pekerja yang tersedia sesuai urutan kedatangan mereka di antrean (FIFO). Pendekatan ini berfungsi baik ketika tugas memiliki waktu eksekusi yang relatif seragam. Namun, untuk skenario yang lebih kompleks, Anda mungkin perlu mengimplementasikan strategi penyeimbangan beban yang lebih canggih.

Teknik dan Pertimbangan Tingkat Lanjut

Di luar implementasi dasar, ada beberapa teknik dan pertimbangan tingkat lanjut yang perlu diingat saat bekerja dengan kumpulan thread Web Workers:

• Komunikasi Worker: Selain mengirim tugas ke pekerja, Anda juga dapat menggunakan Web Workers untuk berkomunikasi satu sama lain. Ini dapat berguna untuk mengimplementasikan algoritma paralel yang kompleks atau untuk berbagi data antar pekerja. Gunakan `postMessage` untuk mengirim informasi antar pekerja.
• Shared Array Buffers: Shared Array Buffers (SAB) menyediakan mekanisme untuk berbagi memori antara thread utama dan Web Workers. Ini dapat secara signifikan meningkatkan kinerja saat bekerja dengan dataset besar. Waspadai implikasi keamanan saat menggunakan SAB. SAB memerlukan pengaktifan header spesifik (COOP dan COEP) karena kerentanan Spectre/Meltdown.
• OffscreenCanvas: OffscreenCanvas memungkinkan Anda untuk merender grafik di Web Worker tanpa memblokir thread utama. Ini bisa berguna untuk mengimplementasikan animasi yang kompleks atau untuk melakukan pemrosesan gambar di latar belakang.
• WebAssembly (WASM): WebAssembly memungkinkan Anda menjalankan kode berkinerja tinggi di browser. Anda dapat menggunakan Web Workers bersama dengan WebAssembly untuk lebih meningkatkan kinerja aplikasi web Anda. Modul WASM dapat dimuat dan dieksekusi di dalam Web Workers.
• Cancellation Tokens: Menerapkan token pembatalan memungkinkan Anda untuk menghentikan tugas yang berjalan lama di dalam web workers dengan baik. Ini sangat penting untuk skenario di mana interaksi pengguna atau peristiwa lain mungkin mengharuskan penghentian tugas di tengah eksekusi.
• Prioritas Tugas: Menerapkan antrean prioritas untuk tugas memungkinkan Anda untuk memberikan prioritas lebih tinggi pada tugas-tugas kritis, memastikan mereka diproses sebelum yang kurang penting. Ini berguna dalam skenario di mana tugas-tugas tertentu harus diselesaikan dengan cepat untuk menjaga pengalaman pengguna yang lancar.

Contoh Dunia Nyata dan Kasus Penggunaan

Kumpulan thread Web Workers dapat digunakan dalam berbagai macam aplikasi, termasuk:

• Pemrosesan Gambar dan Video: Melakukan tugas pemrosesan gambar atau video di latar belakang dapat secara signifikan meningkatkan responsivitas aplikasi web. Misalnya, editor foto online dapat menggunakan kumpulan thread untuk menerapkan filter atau mengubah ukuran gambar tanpa memblokir thread utama.
• Analisis dan Visualisasi Data: Menganalisis dataset besar dan menghasilkan visualisasi bisa jadi intensif secara komputasi. Menggunakan kumpulan thread dapat mendistribusikan beban kerja ke beberapa pekerja, mempercepat proses analisis dan visualisasi. Bayangkan dasbor keuangan yang melakukan analisis data pasar saham secara real-time; menggunakan Web Workers dapat mencegah UI membeku selama perhitungan.
• Pengembangan Game: Melakukan logika game dan rendering di latar belakang dapat meningkatkan kinerja dan responsivitas game berbasis web. Misalnya, mesin game dapat menggunakan kumpulan thread untuk menghitung simulasi fisika atau merender adegan yang kompleks.
• Machine Learning: Melatih model machine learning bisa menjadi tugas yang intensif secara komputasi. Menggunakan kumpulan thread dapat mendistribusikan beban kerja ke beberapa pekerja, mempercepat proses pelatihan. Misalnya, aplikasi web untuk melatih model pengenalan gambar dapat memanfaatkan Web Workers untuk melakukan pemrosesan paralel data gambar.
• Kompilasi dan Transpilasi Kode: Mengompilasi atau mentranspilasi kode di browser bisa lambat dan memblokir thread utama. Menggunakan kumpulan thread dapat mendistribusikan beban kerja ke beberapa pekerja, mempercepat proses kompilasi atau transpilasi. Misalnya, editor kode online dapat menggunakan kumpulan thread untuk mentranspilasi TypeScript atau mengompilasi kode C++ ke WebAssembly.
• Operasi Kriptografi: Melakukan operasi kriptografi, seperti hashing atau enkripsi, bisa jadi mahal secara komputasi. Web Workers dapat melakukan operasi ini di latar belakang, mencegah thread utama terblokir.
• Jaringan dan Pengambilan Data: Meskipun pengambilan data melalui jaringan secara inheren asinkron menggunakan `fetch` atau `XMLHttpRequest`, pemrosesan data yang kompleks setelah pengambilan masih dapat memblokir thread utama. Kumpulan thread pekerja dapat digunakan untuk mem-parsing dan mentransformasi data di latar belakang sebelum ditampilkan di UI.

Skenario Contoh: Platform E-commerce Global

Bayangkan sebuah platform e-commerce besar yang melayani pengguna di seluruh dunia. Platform ini perlu menangani berbagai tugas latar belakang, seperti:

• Memproses pesanan dan memperbarui inventaris
• Menghasilkan rekomendasi yang dipersonalisasi
• Menganalisis perilaku pengguna untuk kampanye pemasaran
• Menangani konversi mata uang dan perhitungan pajak untuk berbagai wilayah

Dengan menggunakan kumpulan thread Web Workers, platform dapat mendistribusikan tugas-tugas ini ke beberapa pekerja, memastikan bahwa thread utama tetap responsif. Platform ini juga dapat menerapkan penyeimbangan beban untuk mendistribusikan beban kerja secara merata di antara pekerja, mencegah pekerja tunggal mana pun menjadi kelebihan beban. Selain itu, pekerja tertentu dapat disesuaikan untuk menangani tugas-tugas spesifik wilayah, seperti konversi mata uang dan perhitungan pajak, memastikan kinerja optimal bagi pengguna di berbagai belahan dunia.

Untuk internasionalisasi, tugas-tugas itu sendiri mungkin perlu mengetahui pengaturan lokal, yang mengharuskan skrip pekerja dibuat secara dinamis atau menerima informasi lokal sebagai bagian dari data tugas. Pustaka seperti `Intl` dapat digunakan di dalam pekerja untuk menangani operasi spesifik lokalisasi.

Kesimpulan

Kumpulan thread Web Workers adalah alat yang kuat untuk meningkatkan kinerja dan responsivitas aplikasi web. Dengan memindahkan tugas-tugas yang intensif secara komputasi ke thread latar belakang, Anda dapat membebaskan thread utama untuk pembaruan UI dan interaksi pengguna, menghasilkan pengalaman pengguna yang lebih lancar dan lebih menyenangkan. Ketika dikombinasikan dengan strategi penyeimbangan beban yang efektif dan teknik tingkat lanjut, kumpulan thread Web Workers dapat secara signifikan meningkatkan skalabilitas dan efisiensi aplikasi web Anda.

Baik Anda membangun aplikasi web sederhana atau sistem tingkat perusahaan yang kompleks, pertimbangkan untuk menggunakan kumpulan thread Web Workers untuk mengoptimalkan kinerja dan memberikan pengalaman pengguna yang lebih baik bagi audiens global Anda.