Directorio de artículos
Introducción
¿Qué es un trabajador web? Como puede ver en el nombre, el trabajador web es el trabajador que se utiliza en las aplicaciones web. Este trabajador es un hilo que se ejecuta en segundo plano independientemente del hilo web principal.
La ventaja de los trabajadores web es que pueden delegar el trabajo a otros subprocesos independientes, para que no bloqueen el subproceso principal.
Conceptos básicos y uso de Web Workers
Los trabajadores web se crean mediante Worker ().
El trabajador puede especificar el script que se ejecutará en segundo plano y, por lo general, el creador después de que se ejecute el script.
El trabajador tiene un constructor de la siguiente manera:
Worker("path/to/worker/script")
Podemos crear un trabajador pasando la ruta del script a ejecutar.
También se pueden crear nuevos trabajadores en trabajadores, siempre que estos trabajadores sean del mismo origen.
Veamos la definición de trabajador:
interface Worker extends EventTarget, AbstractWorker {
onmessage: ((this: Worker, ev: MessageEvent) => any) | null;
onmessageerror: ((this: Worker, ev: MessageEvent) => any) | null;
postMessage(message: any, transfer: Transferable[]): void;
postMessage(message: any, options?: PostMessageOptions): void;
terminate(): void;
addEventListener<K extends keyof WorkerEventMap>(type: K, listener: (this: Worker, ev: WorkerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof WorkerEventMap>(type: K, listener: (this: Worker, ev: WorkerEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
declare var Worker: {
prototype: Worker;
new(stringUrl: string | URL, options?: WorkerOptions): Worker;
};
Puede ver que el constructor de Worker puede pasar dos parámetros. El primer parámetro puede ser una cadena o una URL, que indica la ruta del script a ejecutar.
El segundo parámetro es la opción WorkerOptions, que indica el tipo, el nombre y las opciones relacionadas con los permisos del trabajador.
interface WorkerOptions {
credentials?: RequestCredentials;
name?: string;
type?: WorkerType;
}
Además, el trabajador puede monitorear dos eventos, onmessage y onmessageerror.
Se proporcionan dos métodos: postMessage y terminate.
Tanto el trabajador como el hilo principal pueden enviarse mensajes entre sí a través de postMessage, y también pueden usar onmessage para recibir mensajes enviados entre sí.
También puede agregar y eliminar EventListener.
Veamos un ejemplo del uso de trabajador:
const first = document.querySelector('#number1');
const second = document.querySelector('#number2');
const result = document.querySelector('.result');
if (window.Worker) {
const myWorker = new Worker("worker.js");
first.onchange = function() {
myWorker.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
second.onchange = function() {
myWorker.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log('Message received from worker');
}
} else {
console.log('Your browser doesn\'t support web workers.')
}
El ejemplo anterior crea un trabajador y envía un mensaje al trabajador.
Echemos un vistazo al contenido de worker.js:
onmessage = function(e) {
console.log('Worker: Message received from main script');
const result = e.data[0] * e.data[1];
if (isNaN(result)) {
postMessage('Please write two numbers');
} else {
const workerResult = 'Result: ' + result;
console.log('Worker: Posting message back to main script');
postMessage(workerResult);
}
}
Publicamos mensajes para el trabajador en el hilo principal, escuchamos mensajes a través de onmessage en el trabajador y publicamos mensajes en el trabajador, y podemos escuchar los mensajes enviados por el trabajador a través de onmessage en el hilo principal.
De esta forma se consigue una perfecta interacción.
Echemos un vistazo a la compatibilidad de los trabajadores:
Como puede ver, básicamente todos los navegadores admiten trabajadores, pero algunos navegadores solo admiten algunos métodos.
Si queremos despedir a un trabajador de inmediato, podemos usar terminar:
myWorker.terminate();
Para manejar las excepciones de los trabajadores, puede usar onerror para manejar las excepciones.
Si el script del trabajador es más complicado y se necesitan otros archivos de script, podemos usar importScripts para importar otros scripts:
importScripts(); /* imports nothing */
importScripts('foo.js'); /* imports just "foo.js" */
importScripts('foo.js', 'bar.js'); /* imports two scripts */
importScripts('//example.com/hello.js'); /* You can import scripts from other origins */
Clasificación de trabajadores web
Los Web Workers se pueden dividir en DedicatedWorker y SharedWorker según los diferentes entornos de trabajo.
Solo se puede acceder al Trabajador de DedicatedWorker desde el script que creó el Woker, mientras que se puede acceder a SharedWorker mediante varios scripts.
En el ejemplo anterior, el trabajador que creamos es DedicatedWorker.
¿Cómo crear sharedWorker?
var myWorker = new SharedWorker('worker.js');
SharedWorker tiene una clase SharedWorker separada, que es diferente del trabajador dedicado en que SharedWorker interactúa a través de objetos de puerto.
Veamos un ejemplo de trabajador compartido:
var first = document.querySelector('#number1');
var second = document.querySelector('#number2');
var result1 = document.querySelector('.result1');
if (!!window.SharedWorker) {
var myWorker = new SharedWorker("worker.js");
first.onchange = function() {
myWorker.port.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
second.onchange = function() {
myWorker.port.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
myWorker.port.onmessage = function(e) {
result1.textContent = e.data;
console.log('Message received from worker');
console.log(e.lastEventId);
}
}
Todos los mensajes postMessage y onmessage se basan en myWorker.port.
Mire el código de trabajador nuevamente:
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
port.postMessage(workerResult);
}
}
Los trabajadores también se comunican a través de puertos.
Aquí usamos onconnect para monitorear el evento onmessage o el evento de inicio del hilo principal, los cuales pueden iniciar un SharedWorker.
Eche un vistazo a la compatibilidad del navegador de sharedWorker:
Se puede ver que la compatibilidad es mucho menor que la del trabajador, y solo algunos navegadores admiten esta característica avanzada.
Transmisión de datos entre el trabajador y el hilo principal
Sabemos que la interacción entre el trabajador y el hilo principal es a través de postMessage y onMessage. Esto implica el tema de la transmisión de datos.
De hecho, los datos se transfieren entre el trabajador y el hilo principal en modo de copia y en forma serializada.
Autor: programa flydean esas cosas
Enlace a este artículo: http://www.flydean.com/webworker-kickoff/
Fuente de este artículo: blog de flydean
Bienvenido a prestar atención a mi cuenta oficial: la interpretación más popular de "programas", los productos secos más profundos, los tutoriales más concisos y muchos consejos que no sabes te están esperando para descubrir