Home-theater-designers
JavaScript kan moeite hebben met prestatie-intensieve taken omdat het een single-threaded taal is. Door parallellisme te gebruiken, kunt u multithreaded uitvoering in JavaScript bereiken en de prestaties en het reactievermogen van uw moderne web-apps verbeteren.
Parallellisme in JavaScript-programmering
Parallellisme is cruciaal in moderne computers voor het verbeteren van de prestaties en schaalbaarheid. Het doet dit door effectief gebruik te maken van de beschikbare middelen.
MAAK GEBRUIK VAN DE VIDEO VAN DE DAG SCROLL OM DOOR TE GAAN MET INHOUD
Een veelgebruikte techniek die wordt gebruikt om parallellisme bij het programmeren te bereiken, is multi-threading. De JavaScript-thread is echter een systeem met één thread en kan slechts één taak tegelijk aan. Dit betekent dat het niet bekend is met parallelle programma-uitvoeringen.
JavaScript vervalst parallelle programmering
Een veel voorkomende misvatting over parallellisme is dat je dit kunt bereiken met behulp van asynchrone programmeertechnieken zoals async/wait, callbacks en beloftes:
// 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);
Deze technieken voeren eigenlijk geen code parallel uit. JavaScript gebruikt de gebeurtenislus om parallelle programmering na te bootsen binnen het ontwerp met één thread.
De gebeurtenislus is een fundamenteel onderdeel van de JavaScript-runtime-omgeving. Hiermee kunt u asynchrone bewerkingen, zoals netwerkverzoeken, op de achtergrond uitvoeren zonder de hoofdthread te blokkeren.
De gebeurtenislus controleert constant op nieuwe gebeurtenissen of taken in een wachtrij en voert ze één voor één opeenvolgend uit. Met deze techniek kan JavaScript concurrency en theoretisch parallellisme bereiken.
Gelijktijdigheid versus parallellisme
Concurrency en parallellisme worden vaak verkeerd begrepen en verwisseld in de JavaScript-wereld.
Gelijktijdigheid in JavaScript verwijst naar de mogelijkheid om meerdere taken uit te voeren door de uitvoering van de taken te overlappen. Waar de ene taak kan beginnen voordat de andere is voltooid, maar de taken kunnen niet tegelijkertijd beginnen of eindigen. Hierdoor kan JavaScript operaties efficiënt afhandelen, zoals het ophalen van gegevens uit een REST API of bestanden lezen, zonder de hoofduitvoeringsthread te blokkeren.
wat betekent emoji in sms'en
Parallellisme daarentegen verwijst naar de mogelijkheid om meerdere taken tegelijkertijd over meerdere threads uit te voeren. Deze achtergrondthreads kunnen onafhankelijk en gelijktijdig taken uitvoeren. Dit opent mogelijkheden voor het bereiken van echte parallelliteit in JavaScript-toepassingen.
De toepassingen van JavaScript kunnen echte parallelliteit bereiken door middel van het gebruik van webwerkers .
Webwerkers introduceren parallelliteit met JavaScript
Web Workers zijn een kenmerk van moderne webbrowsers waarmee JavaScript-code in achtergrondthreads kan worden uitgevoerd, los van de hoofduitvoeringsthread. In tegenstelling tot de hoofdthread, die gebruikersinteracties en UI-updates afhandelt. De Web Worker zou toegewijd zijn aan het uitvoeren van rekenintensieve taken.
Hieronder is een schematische weergave van de werking van een Web Worker in JavaScript.
De rode draad en de Web Worker kunnen communiceren door middel van het doorgeven van berichten. De ... gebruiken bericht plaatsen methode om berichten te verzenden en de onbericht gebeurtenishandler om berichten te ontvangen, kunt u instructies of gegevens heen en weer doorgeven.
Een webwerker maken
Om een Web Worker te maken, moet u een apart JavaScript-bestand maken.
Hier is een voorbeeld:
// 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);
};
In het bovenstaande voorbeeld wordt een nieuwe Web Worker gemaakt door het pad naar het worker-script door te geven ( werker.js ) als argument voor de werknemer constructeur. U kunt een bericht naar de Web Worker sturen met behulp van de bericht plaatsen methode en luister naar berichten van de Web Worker met behulp van de onbericht gebeurtenishandler.
Vervolgens moet u het werkscript maken ( werker.js ) bestand:
// 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!");
};
Het Web Worker-script luistert naar berichten van de hoofdthread met behulp van de onbericht gebeurtenishandler. Bij ontvangst van een bericht logt u het bericht binnenin uit gebeurtenis.gegevens en stuur een nieuw bericht naar de hoofdthread met de bericht plaatsen methode.
Gebruikmaken van parallellisme met webwerkers
De primaire use-case voor Web Workers is het parallel uitvoeren van rekenintensieve JavaScript-taken. Door deze taken over te dragen aan Web Workers, kunt u aanzienlijke prestatieverbeteringen bereiken.
Hier is een voorbeeld van het gebruik van een webwerker om een zware berekening uit te voeren:
// 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
}
In dit voorbeeld geeft u een reeks getallen van de hoofdthread door aan de Web Worker. De Web Worker voert de berekening uit met behulp van de verstrekte gegevensreeks en stuurt het resultaat terug naar de hoofdthread. De voerHeavyCalculation() uit functie wijst elk getal toe aan zijn kubus, filtert de even getallen eruit en telt ze uiteindelijk op.
Beperkingen en overwegingen
Hoewel Web Workers een mechanisme bieden voor het bereiken van parallellisme in JavaScript, is het belangrijk om enkele beperkingen en overwegingen in overweging te nemen:
- Geen gedeeld geheugen : Web Workers werken in afzonderlijke threads en delen geen geheugen met de hoofdthread. Ze kunnen dus niet rechtstreeks toegang krijgen tot variabelen of objecten vanuit de hoofdthread zonder dat er berichten worden doorgegeven.
- Serialisatie en deserialisatie : Bij het doorgeven van gegevens tussen de hoofdthread en Web Workers, moet u de gegevens serialiseren en deserialiseren, aangezien het doorgeven van berichten een op tekst gebaseerde communicatie is. Dit proces brengt prestatiekosten met zich mee en kan van invloed zijn op de algehele prestaties van de app.
- Browser-ondersteuning : Hoewel Web Workers goed worden ondersteund in de meeste moderne webbrowsers, bieden sommige oudere browsers of beperkte omgevingen mogelijk gedeeltelijke of geen ondersteuning voor Web Workers.
Bereik True Parallellisme in JavaScript
Parallellisme in JavaScript is een opwindend concept dat echte gelijktijdige uitvoering van taken mogelijk maakt, zelfs in een voornamelijk single-threaded taal. Met de introductie van Web Workers kunt u profiteren van de kracht van parallellisme en aanzienlijke prestatieverbeteringen in uw JavaScript-applicaties realiseren.