web worker简介

Web Worker规范定义了在网络应用中生成背景脚本的API。

我们可以通过Web Worker执行一些操作，例如触发长时间运行的脚本以处理计算密集型任务，同时却不会阻碍 UI或其他脚本处理用户互动。

值得注意的是，规范中提到了两种Worker：专用Worker以及共享Worker。本文只讲专用Worker，下文称之为“Web Worker”或“Worker”。

入门

Web Worker是在独立线程中运行的，因此，它们执行的代码需要保存在一个单独的文件中，我们可以这样创建一个Worker：

1
var worker = new Worker('/assets/js/tests/simple-web-worker.js');

如果指定的异步下载文件存在，浏览器就会生成新的Worker线程。在完全下载并执行文件之前，系统不会生成Worker。如果指定的文件不存在，Worker就不会创建成功。

全局作用域

Worker拥有一个独立于JavaScript执行环境的全局作用域，它不能访问DOM以及大部分BOM，它只能使用JavaScript的一部分功能：

  • XMLHttpRequest
  • self，Worker作用域内的全局对象，等同于Worker中的this
  • navigator，这是个被阉割的对象，在Worker中，它仅包含了部分属性
  • location，等同于window.location，但是所有属性都是只读的。
  • setTimeout和setInterval
  • 一个importScripts方法，用于向Worker注入外部脚本文件。
  • 所有ECMAScript规范中定义的构造器。

既然是一个独立的执行环境，那Worker中的所有全局变量都应该是self的属性，比如：

1
2
3
onmessage = function(e) {
    // ...
}

这样写虽然没问题，但是不好理解，所以建议这么写：

1
2
3
self.onmessage = function(e) {
    // ...
}

其实，更优雅的方式应该是这样：

1
2
3
self.addEventListener('message', function(e) {
    // ...
}, false);

消息传递

Worker不能直接影响页面，它需要通过一个消息系统来传递消息。

Worker可以通过postMessage方法来传递消息，例如：

主页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<button onclick="sayHI()">打招呼</button>
<button onclick="sayBalala()">随便说一句</button>
<button onclick="sayBye()">停止</button>
<output id="result"></output>

<script type="text/javascript">
    function sayHI() {
        worker.postMessage({
            cmd: 'start',
            msg: 'HI, ' + (+new Date)
        });
    }
    function sayBalala() {
        worker.postMessage({
            cmd: 'balala',
            msg: 'balala, ' + (+new Date)
        });
    }
    function sayBye() {
        worker.postMessage({
            cmd: 'stop',
            msg: 'Bye'
        });
    }

    var worker = new Worker('/assets/js/tests/simple-web-worker.js');
    worker.addEventListener('message', function(e) {
        document.getElementById('result').innerHTML = e.data;
    }, false);
</script>

在Worker文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
self.addEventListener('message', function(e) {
    var data = e.data;

    switch(data.cmd) {
        case 'start':
            self.postMessage('Worker started: ' + data.msg);
            break;
            break;
        case 'stop':
            self.postMessage('Worker stopped: ' + data.msg);
            self.close();
            break;
        default:
            self.postMessage('unkown command: ' + data.msg);
    }
}, false);

示例：运行此Worker！

后记

在使用Worker时，可能需要关闭Worker，通常有以下两种办法：

  • 在主线程脚本中调用worker.terminate()
  • 在Worker内部中调用self.close()

Worker一旦关闭后，就不再可用。