Hva er parallellisme i JavaScript?

Hva er parallellisme i JavaScript?
Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

JavaScript kan slite med ytelsesintensive oppgaver fordi det er et enkelt-tråds språk. Ved å bruke parallellitet kan du oppnå flertrådskjøring i JavaScript og forbedre ytelsen og responsen til de moderne nettappene dine.





Parallellisme i JavaScript-programmering

Parallellisme er avgjørende i moderne databehandling for å forbedre ytelse og skalerbarhet. Den gjør dette ved å effektivt utnytte tilgjengelige ressurser.





MAKEUSE AV DAGENS VIDEO RULL FOR Å FORTSETTE MED INNHOLD

En vanlig teknikk som brukes for å oppnå parallellitet i programmering er multi-threading. JavaScript-tråden er imidlertid et enkelttrådssystem og kan bare håndtere én oppgave om gangen. Dette betyr at den ikke er kjent med parallelle programkjøringer.





JavaScript forfalsker parallell programmering

En vanlig misforståelse om parallellitet er at du kan oppnå det ved å bruke asynkron programmeringsteknikker som asynkron/avvent, tilbakeringinger og løfter:

 // Async/await function that simulates a network request 
async function fetchData() {
  const response = await fetch();
  const data = await response.json();
  return data;
}

// Callback function that logs the fetched data to the console
function logData(data) {
  console.log(data);
}

// Promise.all() method that executes multiple promises in parallel
Promise.all([
  fetchData(),
  fetchData(),
]).then((results) => {
  console.log(results);
});

// Call the fetchData function and pass the logData function as a callback
fetchData().then(logData);

Disse teknikkene kjører faktisk ikke kode parallelt. JavaScript bruker hendelsessløyfen til å etterligne parallell programmering innenfor enkelttrådsdesignet.



Hendelsesløkken er en grunnleggende del av JavaScript-kjøretidsmiljøet. Den lar deg utføre asynkrone operasjoner, for eksempel nettverksforespørsler, i bakgrunnen uten å blokkere hovedtråden.

Hendelsesløkken sjekker hele tiden etter nye hendelser eller oppgaver i en kø og utfører dem én etter én sekvensielt. Denne teknikken lar JavaScript oppnå samtidighet og teoretisk parallellitet.





Samtidighet vs. parallellisme

Samtidighet og parallellisme blir ofte misforstått og utvekslet i JavaScript-verdenen.

flytte filen fra en Google -stasjon til en annen

Samtidighet i JavaScript refererer til muligheten til å utføre flere oppgaver ved å overlappe utførelsen av oppgavene. Der en oppgave kan starte før en annen fullfører, men oppgavene kan verken starte eller slutte samtidig. Dette gjør det mulig for JavaScript å håndtere operasjoner effektivt, for eksempel å hente data fra en REST API eller lese filer, uten å blokkere hovedutførelsestråden.





Parallelisme, derimot, refererer til muligheten til å utføre flere oppgaver samtidig på tvers av flere tråder. Disse bakgrunnstrådene kan utføre oppgaver uavhengig og samtidig. Dette åpner for muligheter for å oppnå ekte parallellitet i JavaScript-applikasjoner.

JavaScripts applikasjoner kan oppnå ekte parallellitet gjennom bruken av Web Workers .

Webarbeidere introduserer parallellisme til JavaScript

Web Workers er en funksjon i moderne nettlesere som lar JavaScript-kode kjøres i bakgrunnstråder, atskilt fra hovedutførelsestråden. I motsetning til hovedtråden, som håndterer brukerinteraksjoner og UI-oppdateringer. Webarbeideren vil være dedikert til å utføre beregningsintensive oppgaver.

Nedenfor er en diagramrepresentasjon av driften av en Web Worker i JavaScript.

  Et pildiagram av en Web Worker Operation-flyt

Hovedtråden og Web Worker kan kommunisere ved hjelp av meldingsoverføring. Bruker postmelding metode for å sende meldinger og en melding hendelsesbehandler for å motta meldinger, kan du sende instruksjoner eller data frem og tilbake.

Opprette en nettarbeider

For å opprette en Web Worker, må du opprette en separat JavaScript-fil.

Her er et eksempel:

 // main.js 

// Create a new Web Worker
const worker = new Worker('worker.js');

// Send a message to the Web Worker
worker.postMessage('Hello from the main thread!');

// Listen for messages from the Web Worker
worker.onmessage = function(event) {
  console.log('Received message from Web Worker:', event.data);
};

Eksemplet ovenfor oppretter en ny Web Worker ved å sende banen til arbeiderskriptet ( worker.js ) som et argument til Arbeider konstruktør. Du kan sende en melding til Web Worker ved å bruke postmelding metoden og lytt etter meldinger fra Web Worker ved å bruke en melding hendelsesbehandler.

Du bør da lage arbeidsskriptet ( worker.js ) fil:

 // worker.js 

// Listen for messages from the main thread
self.onmessage = function(event) {
  console.log('Received message from main thread:', event.data);

  // Send a message back to the main thread
  self.postMessage("Hello from worker.js!");
};

Web Worker-skriptet lytter etter meldinger fra hovedtråden ved å bruke en melding hendelsesbehandler. Når du mottar en melding, logger du ut meldingen inne hendelsesdata og send en ny melding til hovedtråden med postmelding metode.

Utnytte parallellisme med nettarbeidere

Den primære brukssaken for Web Workers er å utføre beregningsintensive JavaScript-oppgaver parallelt. Ved å overføre disse oppgavene til Web Workers kan du oppnå betydelige ytelsesforbedringer.

Her er et eksempel på bruk av en nettarbeider til å utføre en tung beregning:

oppdatering av windows 10 som senker datamaskinen
 // main.js 

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

// Send data to the Web Worker for calculation
worker.postMessage([1, 2, 3, 4, 5]);

// Listen for the result from the Web Worker
worker.onmessage = function(event) {
  const result = event.data;
  console.log('Calculation result:', result);
};

Worker.js:

 // Listen for data from the main thread 
self.onmessage = function (event) {
  const numbers = event.data;

  const result = performHeavyCalculation(numbers);

  // Send the result back to the main thread
  self.postMessage(result);
};

function performHeavyCalculation(data) {
  // Perform a complex calculation on the array of numbers
  return data
    .map((number) => Math.pow(number, 3)) // Cube each number
    .filter((number) => number % 2 === 0) // Filter even numbers
    .reduce((sum, number) => sum + number, 0); // Sum all numbers
}

I dette eksemplet sender du en rekke tall fra hovedtråden til Web Worker. Webarbeideren utfører beregningen ved å bruke den oppgitte serien med data og sender resultatet tilbake til hovedtråden. De utføre HeavyCalculation() funksjonen kartlegger hvert tall til sin kube, filtrerer ut partallene og summerer dem til slutt.

Begrensninger og hensyn

Mens Web Workers tilbyr en mekanisme for å oppnå parallellitet i JavaScript, er det viktig å vurdere noen få begrensninger og hensyn:

  • Ingen delt minne : Webarbeidere opererer i separate tråder og deler ikke minne med hovedtråden. Så de kan ikke få direkte tilgang til variabler eller objekter fra hovedtråden uten at meldingen sendes.
  • Serialisering og deserialisering : Når du sender data mellom hovedtråden og Web Workers, må du serialisere og deserialisere dataene siden meldingsoverføring er en tekstbasert kommunikasjon. Denne prosessen medfører en ytelseskostnad og kan påvirke den generelle ytelsen til appen.
  • Nettleserstøtte : Selv om Web Workers støttes godt i de fleste moderne nettlesere, kan enkelte eldre nettlesere eller begrensede miljøer ha delvis eller ingen støtte for Web Workers.

Oppnå ekte parallellisme i JavaScript

Parallellisme i JavaScript er et spennende konsept som muliggjør ekte samtidig utførelse av oppgaver, selv i et primært enkelt-tråds språk. Med introduksjonen av Web Workers kan du utnytte kraften til parallellitet og oppnå betydelige ytelsesforbedringer i JavaScript-applikasjonene dine.