前言
前端工程师们一定有过这样的体验，当一个页面加载了大量的 js 文件时，用户界面可能会短暂地“冻结”。这很好理解，因为 js 是单线程的语言。我们再走的极端点，一段 js 中出现了 while(){} 的死循环，这时再去点击页面的 DOM 元素，将不会触发事件，事实上，这些异步的事件都排成了队列，只等页面的 js 渲染完后去执行（从setTimeout谈JavaScript运行机制），而此时渲染进入了死循环，所以出现了用户界面被“冻结”的现象。
而实际的开发中，虽然不会出现类似的死循环，但是大量的 js 渲染还是会影响用户体验的，此时我们希望这段耗时的 js ***能异步去执行，setTimeout 是一个好的方法，但是 H5 提供了更好的办法，Web Worker! Web Worker 规范通过让 Javascript 在后台运行解决了这个问题。浏览器实现 Web Worker 规范的方式有很多种，可以使用线程、后台进程或者运行在其他处理器核心上的进程，等等。具体的实现细节其实没有那么重要，重要的是开发人员现在可以放心地运行 Javascript，而不必担心会影响用户体验了。
既然 Worker 是 H5 大家庭的，那么 ie6 之辈就可以一边去了，详细的浏览器兼容性可以参考 http://caniuse.com/#search=worker
如果没有 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主线程:
- 通过 var worker = new Worker(url) 加载一个 js 文件来创建一个 worker，同时返回一个 worker 实例。
- 通过 worker.postMessage(data) 方法来向 worker 发送数据。
- 绑定 worker.onmessage 方法来接收 worker 发送过来的数据。
- 可以使用 worker.terminate() 来终止一个 worker 的执行。
worker新线程：
- 绑定 onmessage 方法来接收主线程发送过来的数据。
- 通过 postMessage(data) 方法来向主线程发送数据。
- 可以使用 self.close() 来终止一个 worker 的执行。
Worker 其他
关于 Web Worker，最重要的是要知道它所执行的 Javascript 代码完全在另一个作用域中，与当前网页中的代码不共享作用域。在 Web Worker 中，同样有一个全局对象（worker 对象本身，this 和 self 引用的都是 worker 对象本身）和其他对象以及方法。Web Worker 中的代码不能访问 DOM。那么 Worker 里的代码能访问哪些对象，拥有哪些方法？
- 最小化 的navigator 对象，包括 onLine、appName、appVersion、userAgent 和 platform 属性
- 只读的 location 对象
- setTimeout()、setInterval()、clearTimeout()、clearInterval() 方法
- XMLHttpRequest 构造函数
任何时候都能中止 Worker。在 worker.js 中，我们可以用 self.close()方法，而在页面中，我们可以用 worker.terminal()方法，这时 error 和 message 事件也不会触发了。
