JavaScript Academy · Lekcja

Tworzenie Web Workera

Proszę uruchomić wątek działający w tle do wykonywania zadań.

Tworzenie Web Workera to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Dlaczego Web Workers

JavaScript działa w jednym głównym wątku. Długie obliczenia blokują wszystko: interfejs użytkownika się zawiesza, a kliknięcia przestają działać. Web Workers uruchamiają skrypty w wątku działającym w tle, dzięki czemu strona pozostaje responsywna.

Tworzenie workera

Workera uruchamia się, przekazując adres URL skryptu do konstruktora Worker. Przeglądarka wczytuje ten plik i uruchamia go w osobnym wątku.

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

Skrypt workera

Plik workera zawiera zwykły JavaScript, ale działa we własnym zakresie globalnym — bez window i bez document. Komunikuje się wyłącznie za pomocą komunikatów.

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

Dwa niezależne zakresy globalne

Strona główna i worker mają własne zakresy globalne oraz pamięć. Nie mogą bezpośrednio współdzielić zmiennych; wymieniają kopie danych za pomocą komunikatów.

Wątek główny: window, DOM, interfejs użytkownika
Wątek workera: self, obliczenia, brak DOM-u

Self w workerze

W workerze obiektem globalnym jest self — instancja DedicatedWorkerGlobalScope. Można do niego dołączać procedury obsługi i wywoływać na nim interfejsy, choć self często jest pomijane.

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

Workery modułowe

Można utworzyć workera korzystającego z modułów ES i instrukcji import, przekazując opcję type: 'module'. Dzięki temu worker może w uporządkowany sposób importować inne moduły.

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

Importowanie skryptów (klasyczne)

W klasycznym workerze, który nie jest modułem, należy użyć importScripts, aby synchronicznie wczytać dodatkowe skrypty do zakresu workera.

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

Kończenie działania workera

Workera można zatrzymać z głównego wątku za pomocą worker.terminate() albo od jego wnętrza za pomocą self.close(). Zwolni to wątek i zajmowaną przez niego pamięć.

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

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

Obsługa błędów workera

Należy nasłuchiwać zdarzenia error workera, aby przechwytywać nieobsłużone wyjątki zgłaszane w jego wnętrzu. Zdarzenie zawiera komunikat, nazwę pliku i numer wiersza.

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

Wymaganie tego samego origin

Skrypt workera musi być udostępniany z tego samego originu co strona albo za pośrednictwem adresu URL typu Blob. Nie można bezpośrednio wczytać workera z dowolnego adresu URL pochodzącego z innego originu.

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

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

Worker dedykowany a współdzielony

Obiekt Worker jest dedykowany — jest powiązany ze stroną, która go utworzyła. Z obiektu SharedWorker może korzystać wiele stron z tego samego originu. W tym kursie skupiamy się na workerach dedykowanych.

Szybkie sprawdzenie

Sprawdź zrozumienie tworzenia Web Workers.

Podsumowanie

Poznał Pan/Poznała Pani sposób tworzenia Web Workers:

new Worker('worker.js') uruchamia wątek działający w tle.
Worker ma własny obiekt globalny (self) i nie ma dostępu do DOM-u.
Opcja type: 'module' służy do importowania modułów, a w klasycznych workerach należy używać importScripts.
terminate() / self.close() zatrzymują workera.
Workery muszą pochodzić z tego samego originu.

Następnie zajmiemy się komunikacją między wątkami.

Często zadawane pytania

Czy lekcja „Tworzenie Web Workera” jest bezpłatna?

Tak — pełny tekst „Tworzenie Web Workera” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie Web Workera”?

Proszę uruchomić wątek działający w tle do wykonywania zadań. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Tworzenie Web Workera”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy