004_web worker 主线程与 Worker 之间的通信内容

 

主线程与 Worker 之间的通信内容

 

【1】将数据换成二进制发送的方法。

主线程   http://127.0.0.1:8080/index.html

1  主线程与 Worker 之间也可以交换二进制数据，比如 File、Blob、ArrayBuffer 等类型，也可以在线程之间发送。

    // - Uint8Array 数组类型表示一个8位无符号整型数组
    let uInt8Array = new Uint8Array( new ArrayBuffer(10) );

    for( let i=0; i< Uint8Array.length; i++){
        uInt8Array[i] = i * 2 ; // [ 0,2,4,6,8 ]
    }

    worker.postMessage( uInt8Array );



    worker.onmessage= (ev)=>{
        console.log(ev.data);
        doSomething();
    };

 

worker 线程  http://127.0.0.1:8080/js/func.js

2  把串行化发过来的数据还原。

    self.onmessage = (e)=>{
        let uInt8Array = e.data;
        postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString());
          postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength);
    }

拷贝方式发送二进制数据，会造成性能问题.  比如 一个 20M的文件,浏览器会生成一个拷贝文件，会造成挤卡。

 

---

 

【2】Transferable Objects  直接将数据转移给 worker 子进程

　　JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据。

　　主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生性能负担。

 

主线程

// 例子
var arr = new ArrayBuffer(1);
worker.postMessage(arr, [arr]);

 

worker线程

    self.onmessage = (e)=>{
        postMessage(e.data.toString());
    }