Web Worker 是什么鬼？

前言

前端工程师们一定有过这样的体验，当一个页面加载了大量的 js 文件时，用户界面可能会短暂地“冻结”。这很好理解，因为 js 是单线程的语言。我们再走的极端点，一段 js 中出现了 while(){} 的死循环，这时再去点击页面的 DOM 元素，将不会触发事件，事实上，这些异步的事件都排成了队列，只等页面的 js 渲染完后去执行（从setTimeout谈JavaScript运行机制），而此时渲染进入了死循环，所以出现了用户界面被“冻结”的现象。

而实际的开发中，虽然不会出现类似的死循环，但是大量的 js 渲染还是会影响用户体验的，此时我们希望这段耗时的 js 最好能异步去执行，setTimeout 是一个好的方法，但是 H5 提供了更好的办法，Web Worker! Web Worker 规范通过让 Javascript 在后台运行解决了这个问题。浏览器实现 Web Worker 规范的方式有很多种，可以使用线程、后台进程或者运行在其他处理器核心上的进程，等等。具体的实现细节其实没有那么重要，重要的是开发人员现在可以放心地运行 Javascript，而不必担心会影响用户体验了。

既然 Worker 是 H5 大家庭的，那么 ie6 之辈就可以一边去了，详细的浏览器兼容性可以参考

如果没有 Worker

我们来看这样一段代码：

<div style='width:100px;height:100px;background-color:red'></div> <script> document.querySelector('div').onclick = function() { console.log('hello world'); }; function fibonacci(n) { return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2); } console.log(fibonacci(36)); </script>

页面上写了一个 div，然后监听了它的 click 事件，并且在 js 中需要计算斐波那契数列的第 36 项，并将它输出。这样的页面用户体验是非常差的，如果 fibonacci 不执行完，div 的 click 事件是无法及时响应的，而递归求解斐波那契数列项是相当耗时的！这样一段耗时的 js 代码，交给 worker 来做正合适！

祭出大杀器 Worker

Worker 的使用方法很简单。

实例化 Worker 对象并传入要执行的 Javascript 文件名就可以创建一个新的 Web Worker：

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

这段代码会导致浏览器下载 worker.js，但只有 Worker 接收到消息才会实际执行文件中的代码。要给 Worker 传递消息，可以使用 postMessage() 方法，比如我要告诉 Worker 需要求斐波那契数列的第 36 项：

worker.postMessage(36);

我们来看看 Worker 是怎么接收消息的。当页面在 worker 对象上调用 postMessage()时，数据会以异步方式传递给 worker，进而触发 worker 中的 message 事件。为了处理来自页面的数据，同样也要创建一个 onmessage 事件处理程序。（worker.js 代码）

self.onmessage = function(event) { var data = event.data; console.log(fibonacci(data)); }; function fibonacci(n) { return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2); }

页面可以传数据给 Worker，Worker 当然也可以回传，页面通过 message 事件进行监听：

worker.onmessage = function(event) { var data = event.data; };

Worker 是通过 message 和 error 事件与页面通信的。来自 Worker 的数据保存在 event.data 中。Worker 不能完成给定的任务时会触发 error 事件。具体来说，Worker 内部的 Javascript 在执行过程中只要遇到错误，就会触发 error 事件。发生 error 事件时，事件对象中包含三个属性：filename、lineno 和 message，分别表示错误的文件名、代码行号和完整的错误信息：

worker.onerror = function(event) { console.log(event.filename, event.lineno, event.message); };

我们建议使用 worker 时最好写上 error 事件，就像使用 ajax 时总要写上获取失败时的补救操作一样。

完整代码：

html 文件：

<div style='width:100px;height:100px;background-color:red'></div> <script> document.querySelector('div').onclick = function() { console.log('hello world'); }; var worker = new Worker('worker.js'); worker.postMessage(36); worker.onmessage = function(event) { var data = event.data; console.log(data) }; worker.onerror = function(event) { console.log(event.filename, event.lineno, event.message); }; </script>

worker.js 文件：

self.onmessage = function(event) { var data = event.data; var ans = fibonacci(data); this.postMessage(ans); }; function fibonacci(n) { return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2); }

简单小结：

WEB主线程:

worker新线程：

Worker 其他

关于 Web Worker，最重要的是要知道它所执行的 Javascript 代码完全在另一个作用域中，与当前网页中的代码不共享作用域。在 Web Worker 中，同样有一个全局对象（worker 对象本身，this 和 self 引用的都是 worker 对象本身）和其他对象以及方法。Web Worker 中的代码不能访问 DOM。那么 Worker 里的代码能访问哪些对象，拥有哪些方法？

任何时候都能中止 Worker。在 worker.js 中，我们可以用 self.close()方法，而在页面中，我们可以用 worker.terminal()方法，这时 error 和 message 事件也不会触发了。

posted on