javascript - Pase grandes cantidades de datos entre el trabajador web y el hilo principal

title html

Question

¿Hay una manera de pasar grandes cantidades de datos (múltiples MB) entre un trabajador web y el hilo principal? Trabajo en un proyecto donde necesito descargar archivos, modificarlos un poco y luego de alguna manera permitir que el usuario descargue el archivo modificado. Encontré las siguientes formas de pasar datos entre un trabajador web y la interfaz de usuario principal

1. Usando el método regular postMessage .
2. Uso de objetos transferibles (solo Chrome)
3. Cree una referencia de URL a un blob y solo envíe la URL (¿funciona en Chrome, en otros también?)

Creo que (1) está bien cuando se envían objetos más pequeños, pero se necesita mucho tiempo y espacio cuando se trata de archivos de más de unos pocos MB, ya que se serializa y se envía como JSON. Chrome ofrece una forma de transferir datos utilizando objetos transferibles donde no es necesario copiar los datos. Desafortunadamente, esta es una característica exclusiva de Chrome hasta ahora, ya que de otro modo hubiera servido para mi propósito.

Lo último que encontré fue, desde el trabajador, crear una URL a un blob usando self.webkitURL y luego solo pasar la referencia de la URL a la IU. Esto funciona bien, puedo darle la URL al usuario y ellos pueden descargar el archivo. Lamentablemente no he encontrado una forma de hacerlo en Firefox, ¿es posible?

¿Hay algún otro método que pueda usarse para transferir datos entre los trabajadores y el hilo principal?

Answer 1

De acuerdo con este tutorial de WebWorkers , los trabajadores de WebWorkers ahora admiten la transferencia de objetos File y Blob y básicamente cualquier objeto que pueda usarse con el algoritmo de clonación estructurada ... o al menos Chrome lo hace, probablemente porque implementa la API FileSystem. No sé si es la razón principal, pero espero que no, y de hecho, esta función se implementa en otros navegadores ... poder procesar los archivos seleccionados por el usuario en segundo plano es una buena cosa.

Answer 2

Firefox / Opera / Chrome admiten actualmente una variedad de trabajadores web llamados Objetos transferibles, que es extremadamente rápido, y también extremadamente fácil de configurar. Aquí enviamos al ww (trabajador web) una matriz asignada por el navegador que se rellena con el ww y se devuelve al lado del navegador. Esto se pasa por referencia, no una copia: navegador <-> ww

En el lado del navegador:

var huge_array = new Float32Array(SIZE);

// worker.postMessage(huge_array.buffer);                      // old way
   worker.postMessage(huge_array.buffer, [huge_array.buffer]); // new Trans Obj

y luego dentro del trabajador web:

self.onmessage = function(e) {

      var flt_arr = new Float32Array(e.data);

    //  typically you might want to populate flt_arr here

    //  now send data structure back to browser

    // self.postMessage(flt_arr.buffer);                    // old way
       self.postMessage(flt_arr.buffer, [flt_arr.buffer]); // new Trans Obj way
}

Simplemente colocando el objeto de datos entre corchetes [aquí], esto hace que js desaparezca para usar el modo Objeto Transferible. Esto también funciona cuando se envían objetos javascript de ida y vuelta que contienen múltiples variables, no solo matrices escritas.

Para citar :

Los objetos transferibles son objetos que no se copian (por ejemplo, utilizando algo como la clonación estructurada). En cambio, los datos se transfieren de un contexto a otro. La ''versión'' del contexto de llamada ya no está disponible una vez transferida al nuevo contexto. Por ejemplo, al transferir un ArrayBuffer de la aplicación principal al trabajador, el ArrayBuffer original del hilo principal se borra y ya no se puede utilizar. Esto mejora enormemente el rendimiento del envío de datos a un trabajador

http://html5-demos.appspot.com/static/workers/transferables/index.html https://html.spec.whatwg.org/multipage/workers.html