Passa grandi quantità di dati tra web worker e thread principale

Question

C'è un modo per passare grandi quantità di dati (più MB) tra un web worker e il thread principale? Lavoro in un progetto in cui ho bisogno di scaricare file, modificarli un po 'e poi in qualche modo consentire all'utente di scaricare il file modificato. Ho trovato i seguenti modi per passare i dati tra un web worker e l'interfaccia utente principale

1. Utilizzo del metodo regolare postMessage.
2. utilizzando oggetti trasferibili (Chrome solo)
3. Creare un riferimento URL a un blob e inviare solo l'URL (funziona in Chrome, in altri pure?)

credo (1) va bene quando inviare oggetti più piccoli ma richiede molto tempo e spazio quando si tratta di file più grandi di pochi MB dato che è serializzato e inviato come JSON. Chrome offre un modo per trasferire i dati utilizzando oggetti trasferibili in cui i dati non devono essere copiati. Sfortunatamente questa è una caratteristica di Chrome finora, dal momento che avrebbe altrimenti servito il mio scopo.

L'ultima cosa che ho trovato era, dal lavoratore, creare un URL per un BLOB utilizzando self.webkitURL e quindi passare solo il riferimento URL all'interfaccia utente. Funziona bene, posso dare l'URL all'utente e possono scaricare il file. Purtroppo non ho trovato un modo per farlo è in Firefox, è possibile?

Esistono altri metodi che è possibile utilizzare per trasferire i dati tra gli operatori e il thread principale?

Answer 1

Secondo questa WebWorkers tutorial, WebWorkers ora di supporto per passare file e Blob oggetti e praticamente qualsiasi oggetto che possono essere utilizzati con la structured clone algorith ... o almeno Chrome lo fa, probabilmente perché implments l'API FileSystem. Non so se è la ragione principale, ma spero di no e in effetti questa funzione è implementata in altri browser ... essere in grado di elaborare i file selezionati dall'utente in background è una cosa carina.

Answer 2

Firefox/Opera/Chrome attualmente supportano tutti a flavor of web workers called Transferable Objects che è estremamente veloce, anche estremamente facile da configurare. Qui inviamo al ww (web worker) un array allocato dal browser che viene popolato dal ww e restituito al browser. Questa è passato per riferimento, non una copia: il browser < -> ww

Sul lato del browser:

var huge_array = new Float32Array(SIZE); 

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

e poi sopra all'interno del lavoratore 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 
} 

Semplicemente mettendo il oggetto dati all'interno di parentesi quadre [qui dentro] questo suggerisce come usare la modalità Oggetto trasferibile. Questo funziona anche quando si inviano avanti e indietro oggetti javascript contenenti più variabili, non solo array digitati.

To quote:

oggetti trasferibili sono oggetti che non sono copiati (per esempio usando qualcosa come clonazione strutturata). Invece, i dati vengono trasferiti da un contesto all'altro. La 'versione' dal contesto chiamante non è più disponibile una volta trasferita nel nuovo contesto. Ad esempio, quando si trasferisce un ArrayBuffer dall'app principale a Worker, l'ArrayBuffer originale dal thread principale viene cancellato e non più utilizzabile.Questo migliora notevolmente le prestazioni di invio dei dati ad un lavoratore

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