了解 Web Worker

阮一峰教程：www.ruanyifeng.com/blog/2018/0…

1.介绍

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

由于js单线程语言，js事件循环机制倒是通过异步任务解决了多线程问题

如上图为事件循环示例图（或JS运行机制图），流程如下：

　　　　step1：主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈；

　　　　step2: 主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）;

　　　　step3: 异步进程处理完毕（Ajax返回、DOM事件处罚、Timer到等），将相应的异步任务推入任务队列；

　　　　step4: 主线程执行完毕，查询任务队列，如果存在任务，则取出一个任务推入主线程处理（先进先出）；

　　　　step5: 重复执行step2、3、4；称为事件循环。

　　执行的大意：

　　　　同步环境执行(step1) -> 事件循环1(step4) -> 事件循环2(step4的重复)…

　　其中的异步进程有：

　　　　a、类似onclick等，由浏览器内核的DOM binding模块处理，事件触发时，回调函数添加到任务队列中；

　　　　b、setTimeout等，由浏览器内核的Timer模块处理，时间到达时，回调函数添加到任务队列中；

　　　　c、Ajax，由浏览器内核的Network模块处理，网络请求返回后，添加到任务队列中。

JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。

2.基本使用

Web Worker 有以下几个使用注意点。

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

2.1 主线程

主线程采用new命令，调用Worker()构造函数，新建一个 Worker 线程。

var worker = new Worker('work.js');

Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。

然后，主线程调用worker.postMessage()方法，向 Worker 发消息。

worker.postMessage()方法的参数，就是主线程传给 Worker 的数据。它可以是各种数据类型，包括二进制数据。

接着，主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息。

上面代码中，事件对象的data属性可以获取 Worker 发来的数据。

Worker 完成任务以后，主线程就可以把它关掉。

 var worker = new Worker('work.js');

        worker.postMessage('Hello World');
        worker.postMessage({ method: 'echo', args: ['Work'] });

        worker.onmessage = function (event) {
            console.log('Received message ' + event.data);
            doSomething();
        }

        function doSomething() {
            // 执行任务
            worker.postMessage('Work done!');
        }

        worker.terminate();

2.2 Worker 线程

Worker 线程内部需要有一个监听函数，监听message事件。

self代表子线程自身，即子线程的全局对象。

除了使用self.addEventListener()指定监听函数，也可以使用self.onmessage指定。监听函数的参数是一个事件对象，它的data属性包含主线程发来的数据。self.postMessage()方法用来向主线程发送消息。

self.addEventListener('message', function (e) {
    this.self.postMessage('You said:' + e.data)
}, false)

// // 写法一
// this.addEventListener('message', function (e) {
//     this.postMessage('You said: ' + e.data);
// }, false);

// // 写法二
// addEventListener('message', function (e) {
//     postMessage('You said: ' + e.data);
// }, false);

2.3 关闭worker

// 主线程
worker.terminate();

// Worker 线程
self.close();

3.API

3.1 主线程

浏览器原生提供Worker()构造函数，用来供主线程生成 Worker 线程。

var myWorker = new Worker(jsUrl, options);

Worker()构造函数，可以接受两个参数。第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的，且只能加载 JS 脚本，否则会报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程。

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });

// Worker 线程
self.name // myWorker

Worker()构造函数返回一个 Worker 线程对象，用来供主线程操作 Worker。Worker 线程对象的属性和方法如下。

Worker.onerror：指定 error 事件的监听函数。

Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。

Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。

Worker.postMessage()：向 Worker 线程发送消息。

Worker.terminate()：立即终止 Worker 线程。

3.2 Worker 线程

Web Worker 有自己的全局对象，不是主线程的window，而是一个专门为 Worker 定制的全局对象。因此定义在window上面的对象和方法不是全部都可以使用。

Worker 线程有一些自己的全局属性和方法。

self.name： Worker 的名字。该属性只读，由构造函数指定。

self.onmessage：指定message事件的监听函数。

self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。

self.close()：关闭 Worker 线程。

self.postMessage()：向产生这个 Worker 线程发送消息。

self.importScripts()：加载 JS 脚本。

好问题！