JavaScript Academy · Oppitunti

Web Workerin luominen

Käynnistäkää taustasäie tehtävien suorittamista varten.

Oppitunti 1/413 vaihetta

Web Workerin luominen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Miksi Web Workereita käytetään

JavaScript suoritetaan yhdessä pääsäikeessä. Pitkä laskutoimitus estää kaiken muun: käyttöliittymä jäätyy eikä napsautuksiin enää reagoida. Web Workerit suorittavat skriptejä taustasäikeessä, joten sivu pysyy käyttökelpoisena.

Workerin luominen

Käynnistä worker välittämällä skriptin URL-osoite Worker-konstruktorille. Selain lataa tiedoston ja suorittaa sen erillisessä säikeessä.

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

Worker-skripti

Worker-tiedosto sisältää tavallista JavaScriptiä, mutta se suoritetaan omassa globaalissa scopessaan (ei window- eikä document-oliota). Se viestii ainoastaan viestien avulla.

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

Kaksi erillistä globaalia scopea

Pääsivulla ja workerilla on kummallakin oma globaali scopensa ja muistinsa. Ne eivät voi jakaa muuttujia suoraan, vaan vaihtavat tietojen kopioita viestien avulla.

Pääsäie: window, DOM, käyttöliittymä
Worker-säie: self, laskenta, ei DOMia

self workerissa

Workerin sisällä globaali olio on self (DedicatedWorkerGlobalScope). Siihen voi liittää käsittelijöitä ja siinä voi kutsua rajapintoja, vaikka self jätetään usein kirjoittamatta.

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

Moduuli-Workerit

Voit luoda workerin, joka käyttää ES-moduulin import-lausetta, välittämällä sille type: 'module'-asetuksen. Näin worker voi tuoda muita moduuleja siististi.

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

Skriptien tuominen (klassinen)

Klassisessa eli ei-moduulipohjaisessa workerissa voit käyttää importScripts-funktiota lisäskriptien lataamiseen synkronisesti workerin scopeen.

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

Workerin lopettaminen

Worker voidaan pysäyttää pääsäikeestä kutsumalla worker.terminate() tai sen sisältä kutsumalla self.close(). Tämä vapauttaa säikeen ja sen muistin.

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

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

Worker-virheiden käsittely

Kuuntele workerin error-tapahtumaa, jotta voit ottaa kiinni sen sisällä tapahtuvista käsittelemättömistä poikkeuksista. Tapahtuma sisältää viestin, tiedostonimen ja rivinumeron.

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

Saman alkuperän vaatimus

Worker-skripti on tarjottava samasta alkuperästä kuin sivu, tai sen on käytettävä Blob URL -osoitetta. Workeria ei voi ladata suoraan mielivaltaisesta eri alkuperän URL-osoitteesta.

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

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

Dedicated vai Shared

Worker on dedikoitu: se on sidottu sivuun, joka loi sen. SharedWorkeria voivat käyttää useat saman alkuperän sivut. Tällä kurssilla keskitytään dedikoituihin workereihin.

Pikatesti

Testaa, miten hyvin ymmärrät Web Workereiden luomisen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit luomaan Web Workereita:

new Worker('worker.js') käynnistää taustasäikeen.
Workerilla on oma globaali scopensa (self) eikä lainkaan DOMia.
Käytä tuonteihin type: 'module' -asetusta tai klassisissa workereissa importScripts-funktiota.
terminate() / self.close() pysäyttävät workerin.
Workereiden on oltava samasta alkuperästä.

Seuraavaksi käsittelemme säikeiden välistä viestintää.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Web Workerin luominen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Web Workerin luominen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Web Workerin luominen”?

Käynnistäkää taustasäie tehtävien suorittamista varten. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Web Workerin luominen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy