web Workers使用

Web Workers可以让web应用程序具备后台处理能力，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

主线程：

• 初始化Web Workers:

worker = new Worker(URL); //URL可以是绝对路径或者是相对路径，只要同源的就行

• 向worker发送数据

postMessage(data);

• 收worker发送过来的数据

worker.onmessage = function (e) {
    console.log(e.target); //用来指向发送信息的worker
    console.log(e.data); //事件的data属性存有消息内容
}

• 发送错误时的执行函数

worker.onerror = function (e) {
    console.log(
        e.message, //错误信息
        e.filename, //错误文件名
        e.lineno //错误行
    )
}

• 终止一个worker的执行

worker.terminate()

worker线程：

• 在worker中载入其他javascript文件

importScripts("worker1.js", "worker2.js", "worker3.js"); //它们会安顺序执行

• 接受主线程发过来的数据

onmessage = function (e) {
    var msg = e.data;
}

• 向主线程发送数据

postMessage(data)

• 自己终止worker

self.close()

提醒：

1. worker内代码不能访问DOM，可以访问navigator的部分属性
2. 不能跨域加载JS
3. 可以使用XMLHttpRequest来发送请求

示例：

//启动worker
var worker = new Worker("worker.js");
worker.postMessage(1);
worker.onmessage = function (e) {
    console.log(e.data);
}

//worker
onmessage = function (e) {
    var n = e.data;
    n++;
    postMessage(n);
}