Web Developmentexpert

Čo je Web Worker?

Web Worker je mechanizmus prehliadača, ktorý umožňuje spúšťať JavaScript v samostatnom vlákne oddelenom od hlavného vlákna stránky. Výpočtovo náročné operácie tak neblokujú užívateľské rozhranie a stránka zostáva plynulá. Komunikácia s hlavným vláknom prebieha cez postMessage API.

Definícia Web Worker

Čo je Web Worker

Web Worker je JavaScript API, ktoré umožňuje spúšťať skripty v pozadí v samostatnom vlákne (thread) operačného systému. Hlavné vlákno prehliadača (main thread) je zodpovedné za vykresľovanie stránky, spracovanie udalostí a vykonávanie JavaScriptu — ak je zaťažené náročným výpočtom, stránka zamrzne. Web Worker rieši tento problém presunutím náročných operácií do pozadia.

Typy Web Workerov

  • Dedicated Worker — najčastejší typ, patrí jednému skriptu a komunikuje len s ním
  • Shared Worker — zdieľaný medzi viacerými stránkami/tabmi rovnakej domény
  • Service Worker — špeciálny typ pre offline podporu a sieťovú proxy

Obmedzenia Web Workera

  • Žiadny prístup k DOM — Worker nemôže manipulovať s HTML elementmi stránky
  • Žiadny prístup k window objektu — nemá prístup k localStorage, cookies ani document
  • Komunikácia cez správy — dáta sa prenášajú cez postMessage() a onmessage
  • Vlastný globálny kontext — namiesto window používa self

Napriek obmedzeniam Worker môže používať fetch(), WebSocket, IndexedDB a väčšinu webových API.

Praktický príklad

Príklad: Webový editor fotografií potrebuje aplikovať filter na obrázok s rozlíšením 4000x3000 px — spracovanie 12 miliónov pixelov.

Bez Web Workera výpočet trvá 2 sekundy, počas ktorých stránka úplne zamrzne — tlačidlá nereagujú, animácie sa zastavia.

S Web Workerom sa pixelové dáta pošlú do pozadí cez postMessage(). Worker spracuje filter a vráti výsledok. Počas 2-sekundového výpočtu stránka zostáva plne interaktívna — používateľ môže scrollovať, klikať a UI animácie bežia plynule.

Často kladené otázky

Čo je Web Worker?

Web Worker je mechanizmus prehliadača na spúšťanie JavaScriptu v samostatnom vlákne. Umožňuje vykonávať náročné výpočty bez blokovania užívateľského rozhrania. Komunikácia s hlavným vláknom prebieha cez správy.

Kedy použiť Web Worker?

Web Worker je vhodný pre výpočtovo náročné úlohy: spracovanie obrázkov, šifrovanie, parsovanie veľkých JSON súborov, komplexné algoritmy alebo real-time dátové analýzy. Nie je potrebný pre jednoduché operácie.

Aký je rozdiel medzi Web Worker a Service Worker?

Web Worker vykonáva výpočty v pozadí a existuje len kým je stránka otvorená. Service Worker funguje ako sieťová proxy, beží aj po zatvorení stránky a je základom pre offline funkčnosť a push notifikácie.

Súvisiace pojmy

Service Worker

Service Worker je JavaScript skript, ktorý beží na pozadí prehliadača nezávisle od webovej stránky. Funguje ako proxy medzi prehliadačom a sieťou — dokáže zachytávať sieťové požiadavky, cachovať zdroje a umožniť offline fungovanie webu. Je kľúčovou technológiou pre Progressive Web Apps (PWA).

Lazy Loading

Lazy loading je technika odloženého načítavania zdrojov, pri ktorej sa obrázky, videá alebo časti kódu načítajú až vtedy, keď ich používateľ skutočne potrebuje. Znižuje počiatočný objem dát a výrazne zrýchľuje prvé vykreslenie stránky. Prehliadače dnes podporujú natívny lazy loading cez atribút loading="lazy".

Code Splitting

Code splitting je technika rozdelenia JavaScript kódu aplikácie na menšie časti (chunky), ktoré sa načítavajú podľa potreby. Namiesto jedného obrovského súboru prehliadač stiahne len kód potrebný pre aktuálnu stránku. Výrazne zrýchľuje počiatočné načítanie aplikácie.

Caching

Caching je technika ukladania kópií dát alebo zdrojov na miesto, odkiaľ sa dajú rýchlejšie získať pri opakovanom prístupe. Na webe sa cachujú HTML stránky, obrázky, skripty a API odpovede na úrovni prehliadača, CDN alebo servera. Výrazne znižuje dobu načítania a zaťaženie servera.

Critical CSS

Critical CSS je technika extrakcie a inline vloženia CSS pravidiel potrebných na vykreslenie viditeľnej časti stránky (above the fold). Zvyšný CSS sa načíta asynchrónne. Eliminuje render-blocking CSS a výrazne zrýchľuje prvé vykreslenie stránky.

Späť na slovník

Potrebujete pomôcť s webom?

Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.

Napíšte miPozrite moju prácu