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 之辈就可以一边去了,详细的浏览器兼容性可以参考 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主线程:

  1. 通过 var worker = new Worker(url) 加载一个 js 文件来创建一个 worker,同时返回一个 worker 实例。
  2. 通过 worker.postMessage(data) 方法来向 worker 发送数据。
  3. 绑定 worker.onmessage 方法来接收 worker 发送过来的数据。
  4. 可以使用 worker.terminate() 来终止一个 worker 的执行。

worker新线程:

  1. 绑定 onmessage 方法来接收主线程发送过来的数据。
  2. 通过 postMessage(data) 方法来向主线程发送数据。
  3. 可以使用 self.close() 来终止一个 worker 的执行。

Worker 其他


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

  1. 最小化 的navigator 对象,包括 onLine、appName、appVersion、userAgent 和 platform 属性
  2. 只读的 location 对象
  3. setTimeout()、setInterval()、clearTimeout()、clearInterval() 方法
  4. XMLHttpRequest 构造函数

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

上一篇:Oracle一个实例配置多个监听


下一篇:阿里云双12服务器和阿里云双12数据库活动又开始了