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.
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.