JavaScript Academy · Pelajaran

Kasus Penggunaan dan Keterbatasan

Ketahui kapan worker membantu dan hal-hal yang tidak dapat dilakukannya.

Kasus Penggunaan dan Keterbatasan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Kegunaan worker

Web worker sangat berguna ketika Anda memiliki pekerjaan yang berat bagi CPU dan jika dikerjakan di utas utama akan membekukan antarmuka pengguna:

Pemrosesan gambar dan video
Penguraian file besar (CSV, JSON)
Kriptografi dan pembuatan hash
Fisika, analisis data, dan simulasi

Tanpa Akses DOM

Keterbatasan terbesar: worker tidak dapat menyentuh DOM. Tidak ada document atau window. worker menghitung data dan mengirimkannya kembali; utas utama memperbarui antarmuka pengguna.

// Inside a worker:
// document.querySelector(...) -> ReferenceError
// Workers have no DOM at all.

Apa yang IS Tersedia

worker tetap mendapatkan banyak API yang berguna: fetch, setTimeout, WebSocket, IndexedDB, crypto, dan larik bertipe. Jadi, pengambilan data dan penyimpanan berfungsi dengan baik di luar utas.

// Inside a worker this is valid:
// const res = await fetch('/data.json');
// const json = await res.json();
// self.postMessage(json);

Batasan Kloning Terstruktur

Ingat bahwa pesan disalin melalui kloning terstruktur. Anda tidak dapat mengirim fungsi, simpul DOM, atau instans kelas dengan metode, hanya data yang dapat diserialisasi.

// Cannot be sent:
// worker.postMessage(() => {});      // function - fails
// worker.postMessage(document.body); // DOM node - fails

Biaya Memulai dan Pengiriman Pesan

Membuat worker dan menserialisasi pesan menimbulkan biaya tambahan. Untuk tugas kecil, biaya pengiriman pesan dapat melebihi manfaatnya. worker bermanfaat untuk pekerjaan yang cukup besar dan berlangsung terus-menerus.

Menjaga worker Tetap Aktif

Membuat worker baru untuk setiap tugas adalah pemborosan. Gunakan kembali worker yang berumur panjang dan kirimkan banyak pesan kepadanya, atau pertahankan pool kecil worker untuk paralelisme.

// Reuse one worker for many tasks:
const worker = new Worker('worker.js');
function run(task) {
  worker.postMessage(task);
}
// Avoid: new Worker(...) on every single call.

Pool worker

Untuk menggunakan beberapa inti CPU, buat beberapa worker dan distribusikan tugas di antara mereka. Lacak mana yang sedang menganggur dan tetapkan pekerjaan yang masuk kepada worker yang bebas.

const pool = [];
for (let i = 0; i < 4; i++) {
  pool.push(new Worker('worker.js'));
}
// Round-robin or queue tasks across the pool.

Berbagi Memori

Untuk kasus lanjutan, SharedArrayBuffer memungkinkan utas berbagi memori secara langsung (dengan Atomics untuk akses yang aman). Fitur ini memerlukan header isolasi lintas asal khusus dan mudah disalahgunakan.

// Requires COOP/COEP headers to be enabled.
// const shared = new SharedArrayBuffer(1024);
// Atomics.add(view, 0, 1); // safe concurrent update

Isolasi Kesalahan

Kesalahan yang tidak tertangkap di dalam worker tidak membuat halaman mogok. Kesalahan tersebut muncul sebagai peristiwa error pada worker, yang sebaiknya Anda tangani untuk mencatatnya atau memulai ulang worker.

worker.onerror = (e) => {
  console.log('worker failed:', e.message);
  // optionally recreate the worker here
};

Kapan NOT Menggunakan worker

Lewati worker jika tugasnya sepele, memerlukan pembaruan DOM terus-menerus, atau sebagian besar hanya menunggu jaringan (fetch asinkron sudah tidak memblokir). Gunakan worker untuk pekerjaan yang benar-benar terikat CPU.

Menyatukan Semuanya

Web worker menukar akses DOM langsung dan berbagi data yang mudah dengan paralelisme sejati. Gunakan worker untuk perhitungan berat, berkomunikasilah melalui pesan, gunakan kembali worker, dan transfer buffer besar agar aplikasi Anda tetap cepat dan lancar.

Pemeriksaan Singkat

Uji pemahaman Anda tentang kasus penggunaan dan keterbatasan worker.

Rangkuman

Anda telah mempelajari kasus penggunaan dan keterbatasan worker:

Sangat cocok untuk pekerjaan yang berat bagi CPU; tidak memiliki akses DOM.
Banyak API (fetch, IndexedDB, crypto) tersedia.
Pesan dikloning secara terstruktur, sehingga fungsi dan simpul DOM tidak dapat dikirim.
Gunakan kembali worker atau pool untuk mengurangi dampak biaya awal.
Kesalahan tetap terisolasi pada worker.

Anda telah menyelesaikan Web worker. Berikutnya, IndexedDB.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kasus Penggunaan dan Keterbatasan” gratis?

Ya — teks lengkap “Kasus Penggunaan dan Keterbatasan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kasus Penggunaan dan Keterbatasan”?

Ketahui kapan worker membantu dan hal-hal yang tidak dapat dilakukannya. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Kasus Penggunaan dan Keterbatasan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy