JavaScript Academy · Pelajaran

Membuat Web Worker

Jalankan thread latar belakang untuk mengerjakan tugas.

Membuat Web Worker adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Mengapa Pekerja Web?

JavaScript berjalan pada satu utas utama. Perhitungan yang panjang menghambat semuanya: antarmuka pengguna membeku dan klik tidak lagi merespons. Pekerja Web menjalankan skrip pada utas latar belakang sehingga halaman tetap responsif.

Membuat Worker

Buat worker dengan meneruskan alamat skrip ke konstruktor Worker. Peramban memuat berkas tersebut dan menjalankannya pada utas terpisah.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

Skrip Worker

Berkas worker adalah JavaScript biasa, tetapi berjalan dalam cakupan globalnya sendiri, tanpa window dan tanpa document. Worker hanya berkomunikasi melalui pesan.

// worker.js
console.log('worker started');
// This runs off the main thread.

Dua Cakupan Global Terpisah

Halaman utama dan worker masing-masing memiliki cakupan global serta memori sendiri. Keduanya tidak dapat berbagi variabel secara langsung; keduanya bertukar salinan data melalui pesan.

Utas utama: window, DOM, antarmuka pengguna
Utas worker: self, perhitungan, tanpa DOM

Self dalam Worker

Di dalam worker, objek globalnya adalah self (DedicatedWorkerGlobalScope). Anda memasang penangan dan memanggil antarmuka di dalamnya, meskipun self sering kali tersirat.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Worker Modul

Anda dapat membuat worker yang menggunakan import modul ES dengan meneruskan opsi type: 'module'. Dengan begitu, worker dapat mengimpor modul lain dengan rapi.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Mengimpor Skrip (Klasik)

Dalam worker klasik (nonmodul), gunakan importScripts untuk memuat skrip tambahan secara sinkron ke dalam cakupan worker.

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Menghentikan Worker

Hentikan worker dari utas utama dengan worker.terminate(), atau dari dalam worker dengan self.close(). Hal ini membebaskan utas dan memorinya.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Menangani Error Worker

Dengarkan peristiwa error pada worker untuk menangkap pengecualian yang tidak tertangani di dalamnya. Peristiwa tersebut membawa pesan, nama berkas, dan nomor baris.

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Persyaratan Asal yang Sama

Skrip worker harus disajikan dari asal yang sama dengan halaman, atau melalui URL Blob. Anda tidak dapat memuat worker langsung dari alamat lintas asal sembarang.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Khusus vs Bersama

Worker bersifat khusus: terikat pada halaman yang membuatnya. SharedWorker dapat diakses oleh beberapa halaman dari asal yang sama. Pelajaran ini berfokus pada worker khusus.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pembuatan Pekerja Web.

Ringkasan

Anda telah mempelajari cara membuat Pekerja Web:

new Worker('worker.js') membuat utas latar belakang.
Worker memiliki globalnya sendiri (self) dan tidak memiliki DOM.
Gunakan type: 'module' untuk impor, atau importScripts dalam worker klasik.
terminate() / self.close() menghentikannya.
Worker harus berasal dari asal yang sama.

Berikutnya, komunikasi antarutas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Web Worker” gratis?

Ya — teks lengkap “Membuat Web Worker” 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 “Membuat Web Worker”?

Jalankan thread latar belakang untuk mengerjakan tugas. 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 1 dari 4.

Berapa lama pelajaran “Membuat Web Worker” 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