Los trabajadores web nos brindan la posibilidad de escribir Javascript de subprocesos múltiples, que no bloquea el DOM. Incluso las operaciones asincrónicas bloquean el DOM hasta cierto punto. Por otro lado, los trabajadores web nos ayudan a resolver este problema, escapando del entorno de un solo subproceso y logrando un mayor rendimiento de nuestras páginas web.
Para usar:
Implementación de trabajadores web
/* -----------------------------Index.JS--------------------------*/
// Check if web worker functionality is available for the browser
if(window.Worker){
// Creating new web worker using constructor
var worker = new Worker('worker.js');
var message = 'Hello';
// Sending the message using postMessage
worker.postMessage(message);
// On response
worker.onmessage = function(e) {
console.log(e.data);
};
}
/* -----------------------------Worker.JS--------------------------*/
// Waits for any activity from the page
self.onmessage = function(e) {
if(e.data !== undefined) {
// Do work
var total = e.data + ' World';
// Posting back to the page
self.postMessage(total)
}
}
// Terminate with: worker.terminate()
En el ejemplo anterior, el trabajador está haciendo el trabajo de concatenar la string recibida con la definida y la envía de vuelta al archivo main.js sin interrumpir la página.
Output :'Hello World'
Web Workers no tiene acceso a:
Sin embargo, tienen acceso a:
Casos de uso comunes:
Ejemplo del mundo real
El siguiente programa está escrito para mostrar qué diferencia hay en el comportamiento de nuestra página con y sin trabajador.
/* -----------------------------Index.JS--------------------------*/
const delay = 5000;
// Get element of without worker button
const noWorkerBtn = document.getElementById('worker--without');
// Add event listener to the button itself
noWorkerBtn.addEventListener('click', () => {
// Define the starting time
const start = performance.now();
// Do complex calculations
while (performance.now() - start < delay);
// Get the ending time
const end = performance.now();
// Calculate the difference in time
const resWithoutWorker = end - start;
// Log the result
console.log('No worker:', resWithoutWorker);
});
// Define a worker
const worker = new Worker('./worker.js');
// Get element of with worker button
const workerBtn = document.getElementById('worker--with');
// Add event listener to the button
workerBtn.addEventListener('click', () => {
// Send delay number
worker.postMessage(delay);
});
// On message from worker
worker.onmessage = e => {
// Log the result
console.log("With worker: ", e.data);
};
/* -----------------------------Worker.JS--------------------------*/
// On message received
this.onmessage = e => {
// Delay equals to data received
const delay = e.data;
// Define starting time
const start = performance.now();
// Do the complex calculation
while (performance.now() - start < delay);
// Get ending time
const end = performance.now();
// Calculate difference
const resWithWorker = end - start;
// Send result
this.postMessage(end - start);
};
Ejemplos:
Output: 'No worker: 5000' Output: 'With worker: 5000'
Así es como se comporta la página sin nuestro código de trabajo:
Comportamiento de la página sin webworker
Así es como se comporta la página con nuestro código de trabajo:
Comportamiento de la página con webworker
Publicación traducida automáticamente
Artículo escrito por MihailYonchev y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA