javascript web worker的使用方法

假如已经有了一个main.js文件。

需要要使用worker去分担主线程的压力，你可能 需要异步下载，需要解析一些数据，那你首先创建一个worker.js文件。

main.js需要做这件事：

function workerStart(){
 let worker = new Worker("worker.js");
var download_url="http://you-download-url";
 worker.postMessage({url:download_url}); //向worker发送数据
 worker.onmessage = function(evt) { //接收worker传过来的数据函数
  pageload(evt.data.fileData);//evt.data就是异常回传的数据。
}

 

worker.js需要做这些事：

importScripts('../js/jquery.min.js');//worker里面要使用的js都需要通过importScripts
onmessage = function(evt) {
    var d = evt.data; //通过evt.data获得发送来的数据
    $.getJSON(d.url, function(data) {
                var result = data;
                postMessage({fileData:result});
            });
}

恭喜你。worker你已经掌握了一大半！还有另外一小半是关于可移交的对象。因为postMessage传递的数据是通过序列化和反序列化来实现的，这里面有相当多的性能损耗，如果是处理大量的数据，这个worker线程效率可能更低，还不如单线程。那就要想办法把worker里面已经处理好的数据直接移交给main.js使用。

唯一能从worker直接移交的是ArrayBuffer.

你的数据里面有大量的数组，可以先转换为TypedArray(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)

例如

//这是在worker.js中
//resulti是一个超大的浮点数数组        
 var uvs = new Float32Array(resulti);
          postMessage({fileData:uvs }, [ uvs.buffer]);

然后在main中直接访问data.fileData就是移交过来的Float32Array.

恭喜你，已经完全掌握了worker的使用。实际上，浏览器对worker的线程数是有瓶颈的，说得再多，不如你自己去尝试。怎么管理好worker，以达到性能最佳的配置，是要自己动手调试的，师傅教不会。