Sobes.tech
Middle

Kaip sukurti Web Worker srautą JavaScript?

sobes.tech AI

Atsakymas iš AI

JavaScript'e Web Worker'į sukurti naudojamas Worker konstruktorius, kuris priima skripto kelią, vykdomą atskirame sraute:

const worker = new Worker('path/to/worker.js');

Worker'o skriptas (worker.js) vykdomas kitame globaliame kontekste, kuris neturi prieigos prie DOM ar globalaus objekto window. Duomenų mainams naudojami postMessage() metodas ir onmessage įvykio tvarkyklė:

Pagrindiniame skripte:

const worker = new Worker('worker.js');

// Duomenų siuntimas worker'ui
worker.postMessage({ data: 'Sveiki iš pagrindinio srauto!' });

// Žinučių apdorojimas iš worker'o
worker.onmessage = function(event) {
  console.log('Gauta iš worker:', event.data);
};

// Klaidos apdorojimas iš worker'o (nebūtina)
worker.onerror = function(error) {
  console.error('Klaida worker:', error);
};

// Worker'o darbo pabaiga
// worker.terminate();

Worker'o skripte (worker.js):

// Žinučių apdorojimas iš pagrindinio srauto
self.onmessage = function(event) {
  console.log('Gauta worker:', event.data);

  // Ilgalaikės operacijos vykdymas (pavyzdys)
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Rezultato siuntimas atgal į pagrindinį srautą
  self.postMessage({ result: result, originalData: event.data });
};

// Klaidos apdorojimas worker'o viduje (nebūtina)
self.onerror = function(error) {
  console.error('Klaida worker viduje:', error);
};

// Worker gali importuoti kitus skriptus
// importScripts('utils.js', 'helper.js');

Web Workers leidžia išskirti resursų intensyvius skaičiavimus į atskirą srautą, taip išvengiant pagrindinio UI srauto blokavimo ir gerinant programėlės reakciją. Reikėtų atsižvelgti į apribojimus: worker'iai neturi tiesioginės prieigos prie DOM, window, document, localStorage ir sessionStorage. Duomenų mainai vyksta kopijuojant reikšmes arba naudojant Transferable objektus, siekiant padidinti efektyvumą perduodant didelius duomenų kiekius.