一.概述

• js语言采用的是是单线程模型,就是说所有任务只能在一个线程上完成,一次只能做一件事.但是随着电脑计算能力增强,多核cpu的出现,单线程看起来有点吃力了.
• web worker的作用,就是为js创造多线程环境,允许主线程创建worker现成,在主线程运行的同时,worker线程在后台运行,worker运行完将结果返回主线程.
• worker线程新建成功,就会时钟运行,所以一旦使用完毕就应该及时关闭

有下面几点注意

1. 同源限制
   分配给worker线程运行的脚本文件,必须与主线程的脚本文件同源
2. DOM限制
   worker 线程所在的全局对象和主线程不一样,无法读取主线程所在网页的dom对象,也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
3. 通信联系
   worker线程和主线程不在同一上下文环境,他们不能直接通信,必须通过消息来完成
4. 脚本限制
   Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
5. 文件限制
   Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

实例 worker线程完成轮询

function createWorker(f) {
  var blob = new Blob(['(' + f.toString() +')()']);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  return worker;
}

var pollingWorker = createWorker(function (e) {
  var cache;

  function compare(new, old) { ... };

  setInterval(function () {
    fetch('/my-api-endpoint').then(function (res) {
      var data = res.json();

      if (!compare(data, cache)) {
        cache = data;
        self.postMessage(data);
      }
    })
  }, 1000)
});

pollingWorker.onmessage = function () {
  // render data
}

pollingWorker.postMessage('init');

[本文章转载](Web Worker 使用教程 - 阮一峰的网络日志 (ruanyifeng.com))