Web Workers: paralleeltöötluse vabastamine JavaScriptis

Tänapäeva veebiarenduse maastikul on reageerivate ja jõudluslikult hästitoimivate veebirakenduste loomine esmatähtis. Kasutajad ootavad sujuvaid interaktsioone ja kiireid laadimisaegu. Kuid JavaScript, olles ühekordne, võib mõnikord võidelda arvutusmahukate ülesannetega, külmutamata kasutajaliidest. Siin tulevad appi Web Workersid, pakkudes võimalust käivitada skripte taustalõimides, võimaldades tõhusalt paralleeltöötlust JavaScriptis.

Mis on Web Workers?

Web Workers on lihtne vahend veebisisu jaoks, et käivitada skripte taustalõimides. Need võimaldavad teil teha ülesandeid paralleelselt veebirakenduse peamise täitmislõimiga, blokeerimata UI-d. See on eriti kasulik ülesannete puhul, mis on arvutusmahukad, nagu pilditöötlus, andmeanalüüs või keerulised arvutused.

Mõelge sellele nii: Teil on peakokk (peamine lõim), kes valmistab rooga (veebirakendus). Kui kokk peab kõike ise tegema, võib see võtta kaua aega ja kliendid (kasutajad) võivad muutuda kannatamatuks. Web Workersid on nagu abikokad, kes saavad iseseisvalt hakkama konkreetsete ülesannetega (taustaprotsessid), võimaldades peakokal keskenduda roa valmistamise kõige olulisematele aspektidele (UI renderdamine ja kasutajate interaktsioonid).

Miks kasutada Web Workersi?

Web Workersi kasutamise peamine eelis on veebirakenduse jõudluse ja reageerimisvõime paranemine. Arvutusmahukate ülesannete taustalõimidesse viimisega saate vältida peamise lõime blokeerumist, tagades, et UI jääb sujuvaks ja reageerivaks kasutajate interaktsioonidele. Siin on mõned peamised eelised:

• Parem reageerimisvõime: Takistab UI külmumist ja säilitab sujuva kasutajakogemuse.
• Paralleeltöötlus: Võimaldab ülesannete samaaegset täitmist, kiirendades üldist töötlemisaega.
• Täiustatud jõudlus: Optimeerib ressursside kasutamist ja vähendab koormust peamisele lõimele.
• Lihtsustatud kood: Võimaldab teil jagada keerulised ülesanded väiksemateks, hallatavamateks üksusteks.

Web Workersi kasutusjuhud

Web Workersid sobivad paljude ülesannete jaoks, mis võivad paralleeltöötlusest kasu saada. Siin on mõned levinumad kasutusjuhud:

• Pildi- ja videopilditöötlus: Filtrite rakendamine, piltide suuruse muutmine või video failide kodeerimine/dekodeerimine. Näiteks foto redigeerimise veebisait saaks kasutada Web Workersit keeruliste filtrite rakendamiseks piltidele, aeglustamata kasutajaliidest.
• Andmeanalüüs ja arvutamine: Keeruliste arvutuste, andmete manipuleerimise või statistilise analüüsi tegemine. Mõelge finantsanalüüsi tööriistale, mis kasutab Web Workersi reaalajas arvutuste tegemiseks börsiandmete kohta.
• Taustsünkroonimine: Andmete sünkroonimise käsitlemine serveriga taustal. Kujutage ette koostööl põhinevat dokumendiredaktorit, mis kasutab Web Workersi muudatuste automaatseks salvestamiseks serverisse, katkestamata kasutaja töövoogu.
• Mängude arendus: Mängude loogika, füüsika simulatsioonide või AI arvutuste käsitlemine. Web Workers võib parandada keeruliste brauseripõhiste mängude jõudlust, käsitledes neid ülesandeid taustal.
• Koodi süntaksi esiletõstmine: Koodi esiletõstmine koodiredaktoris võib olla CPU-mahukas ülesanne. Web Workersi kasutamine tagab, et peamine lõim jääb reageerivaks ja kasutajakogemus paraneb oluliselt.
• Kiire jäljendamine ja 3D renderdamine: Need protsessid on väga arvutusmahukad ja ideaalsed kandidaadid töötlemiseks tööprotsessis.

Kuidas Web Workers töötab

Web Workersid tegutsevad peamisest lõimest eraldi globaalses ulatuses, mis tähendab, et neil ei ole otsest juurdepääsu DOM-ile ega muudele lõimudele ohututele ressurssidele. Side peamise lõime ja Web Workersi vahel saavutatakse sõnumite edastamise kaudu.

Web Workeri loomine

Web Workeri loomiseks installeerite lihtsalt uue Worker-objekti, edastades tööprotsessi skripti tee argumendina:

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

              
                Copy
              
            
          

worker.js on eraldi JavaScripti fail, mis sisaldab taustalõimes käivitatavat koodi.

Suhtlemine Web Workeriga

Suhtlemine peamise lõime ja Web Workeri vahel toimub meetodiga postMessage() ja sündmusekäsitsejaga onmessage.

Sõnumi saatmine Web Workerile:

            worker.postMessage({ task: 'calculateSum', numbers: [1, 2, 3, 4, 5] });
            

              
                Copy
              
            
          

Sõnumi vastuvõtmine Web Workeris:

            self.onmessage = function(event) {
  const data = event.data;
  if (data.task === 'calculateSum') {
    const sum = data.numbers.reduce((a, b) => a + b, 0);
    self.postMessage({ result: sum });
  }
};

            

              
                Copy
              
            
          

Sõnumi vastuvõtmine peamises lõimes:

            worker.onmessage = function(event) {
  const data = event.data;
  console.log('Result from worker:', data.result);
};

            

              
                Copy
              
            
          

Web Workeri lõpetamine

Kui olete Web Workeriga lõpetanud, on oluline see lõpetada ressursside vabastamiseks. Saate seda teha meetodiga terminate():

            worker.terminate();
            

              
                Copy
              
            
          

Web Workersi tüübid

Web Workersi erinevaid tüüpe on palju, millest igaühel on oma konkreetne kasutusjuht:

• Pühendatud tööprotsessid: Seotud ühe skriptiga ja kättesaadavad ainult selle skripti kaudu. Need on kõige levinum Web Workeri tüüp.
• Jagatud tööprotsessid: Juurdepääs mitmele skriptile erinevatest päritolukohtadest. Need nõuavad keerukamat seadistust ja sobivad stsenaariumide jaoks, kus mitu skripti peavad jagama sama tööprotsessi.
• Teenindusliidesed: Toimivad puhverserveritena veebirakenduste, brauseri ja võrgu vahel. Neid kasutatakse tavaliselt vahemällu salvestamiseks ja võrguühenduseta toetuseks. Teenindusliidesed on eriline Web Workeri tüüp, millel on täiustatud võimalused.

Näide: pilditöötlus Web Workersiga

Illustreerime, kuidas Web Workersit saab kasutada pilditöötluseks taustal. Oletame, et teil on veebirakendus, mis võimaldab kasutajatel pilte üles laadida ja filtreid rakendada. Keeruka filtri rakendamine peamisel lõimel võib UI külmutada, mis viib halva kasutajakogemuseni. Web Workersid võivad seda probleemi aidata lahendada.

HTML (index.html):

            <input type="file" id="imageInput">
<canvas id="imageCanvas"></canvas>
            

              
                Copy
              
            
          

JavaScript (script.js):

            const imageInput = document.getElementById('imageInput');
const imageCanvas = document.getElementById('imageCanvas');
const ctx = imageCanvas.getContext('2d');

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

imageInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const img = new Image();
    img.onload = function() {
      imageCanvas.width = img.width;
      imageCanvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, img.width, img.height);

      worker.postMessage({ imageData: imageData, width: img.width, height: img.height });
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

worker.onmessage = function(event) {
  const processedImageData = event.data.imageData;
  ctx.putImageData(processedImageData, 0, 0);
};

            

              
                Copy
              
            
          

JavaScript (imageWorker.js):

            self.onmessage = function(event) {
  const imageData = event.data.imageData;
  const width = event.data.width;
  const height = event.data.height;

  // Rakenda halltoonifilter
  for (let i = 0; i < imageData.data.length; i += 4) {
    const avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
    imageData.data[i] = avg; // Punane
    imageData.data[i + 1] = avg; // Roheline
    imageData.data[i + 2] = avg; // Sinine
  }

  self.postMessage({ imageData: imageData });
};

            

              
                Copy
              
            
          

Selles näites saadab peamine lõim pildiandmed Web Workerile, kui kasutaja pildi üles laadib. Web Worker rakendab pildiandmetele halltoonifiltri ja saadab töödeldud andmed tagasi peamisse lõime, mis seejärel värskendab lõuendit. See hoiab UI reageerivana ka suuremate piltide ja keerukamate filtrite puhul.

Web Workersi kasutamise parimad tavad

Web Workersi tõhusaks kasutamiseks arvestage järgmiste parimate tavadega:

• Hoidke tööprotsesside skriptid lihtsatena: Vältige tarbetute teekide või koodi lisamist oma tööprotsesside skriptidesse, et minimeerida tööprotsesside loomise ja initsialiseerimise kulusid.
• Optimeerige suhtlust: Minimeerige andmete hulka, mis kantakse peamise lõime ja tööprotsesside vahel. Kasutage ülekantavaid objekte, kui see on võimalik, et vältida andmete kopeerimist.
• Käsitlege vigu graatsiliselt: Rakendage oma tööprotsesside skriptides vigade käsitlemist, et vältida ootamatuid krahhe. Kasutage sündmusekäsitsejat onerror vigade püüdmiseks ja nende asjakohaseks logimiseks.
• Lõpetage tööprotsessid, kui need on valmis: Lõpetage tööprotsessid, kui neid enam vaja ei ole, et ressursse vabastada.
• Kaaluge lõimude bassein: Väga CPU-mahukate ülesannete jaoks kaaluge lõimude basseini rakendamist. Lõimude bassein taaskasutab olemasolevaid tööprotsesside eksemplare, et vältida tööprotsesside objektide korduvast loomisest ja hävitamisest tulenevaid kulusid.

Web Workersi piirangud

Kuigi Web Workers pakuvad märkimisväärseid eeliseid, on neil ka mõningaid piiranguid:

• Piiratud DOM-i juurdepääs: Web Workers ei pääse otse DOM-ile. Nad saavad suhelda peamise lõimega ainult sõnumite edastamise kaudu.
• Akna objekti juurdepääsu puudumine: Web Workers ei pääse ligi objektile window ega muudele globaalsetele objektidele, mis on saadaval peamises lõimes.
• Failidele juurdepääsu piirangud: Web Workersil on piiratud juurdepääs failisüsteemile.
• Silumise väljakutsed: Web Workersi silumine võib olla keerulisem kui peamises lõimes oleva koodi silumine. Kaasaegsed brauseri arendaja tööriistad pakuvad aga tuge Web Workersi silumiseks.

Alternatiivid Web Workersile

Kuigi Web Workers on võimas tööriist paralleeltöötluseks JavaScriptis, on alternatiivseid lähenemisviise, mida võiksite kaaluda, sõltuvalt teie konkreetsetest vajadustest:

• requestAnimationFrame: Kasutatakse animatsioonide ja muude visuaalsete värskenduste ajastamiseks. Kuigi see ei paku tõelist paralleeltöötlust, võib see aidata parandada tajutavat jõudlust, jagades ülesanded väiksemateks tükkideks, mida saab käivitada brauseri ümberjoonistamise tsükli ajal.
• setTimeout ja setInterval: Kasutatakse ülesannete ajastamiseks, et neid saaks käivitada pärast teatud viivitust või regulaarsete ajavahemike järel. Neid meetodeid saab kasutada ülesannete peamisest lõimest eemaldamiseks, kuid need ei paku tõelist paralleeltöötlust.
• Asünkroonsed funktsioonid (async/await): Kasutatakse asünkroonse koodi kirjutamiseks, mida on lihtsam lugeda ja hooldada. Asünkroonsed funktsioonid ei paku tõelist paralleeltöötlust, kuid need võivad aidata reageerimisvõimet parandada, võimaldades peamisel lõimel jätkata täitmist, oodates samal ajal asünkroonsete toimingute lõpuleviimist.
• OffscreenCanvas: See API pakub lõuendit, mida saab renderdada eraldi lõimes, võimaldades sujuvamaid animatsioone ja graafikamahukaid toiminguid.

Järeldus

Web Workers on väärtuslik vahend veebirakenduste jõudluse ja reageerimisvõime parandamiseks, võimaldades paralleeltöötlust JavaScriptis. Arvutusmahukate ülesannete taustalõimidesse viimisega saate vältida peamise lõime blokeerumist, tagades sujuva ja reageeriva kasutajakogemuse. Kuigi neil on mõningaid piiranguid, on Web Workers võimas tehnika veebirakenduste jõudluse optimeerimiseks ja kaasahaaravamate kasutajakogemuste loomiseks.

Kuna veebirakendused muutuvad üha keerukamaks, suureneb vajadus paralleeltöötluse järele. Web Workersi mõistmise ja kasutamisega saavad arendajad luua parema jõudlusega ja reageerivamaid rakendusi, mis vastavad tänapäeva kasutajate nõudmistele.

Lisalugemist

• MDN Web Workers API
• HTML5 Rocks: A Simple Worker Example
• JavaScript.info: Web Workers