前言
对于前端开发者来说，多线程是一个比较陌生的话题。因为JavaScript是单线程语言。也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。
UI渲染与JavaScript是共同使用主线程。如果JavaScript运行过长，可能就会中断UI渲染，从而导致页面卡顿。
为此，JavaScript推出了异步的处理方法。但终归到底还是单线程的。而且随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。
Web Workers就应运而生了。通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，主线程从而不会因此被阻塞。
多线程
我们从熟悉的领域入手来了解多线程是什么。
通常从事开发的同学都对计算机配置有一定的了解，知道CPU配置中都标明几核几线程。比如说6核12线程、8核16线程等。
（电脑比较渣，只有2核4线程）
一般来说：一个CPU有几核就可以跑几个线程，比如说二核二线程--说明这个CPU同时最多能够运行两个线程，而二核四线程是使用了超线程技术，使得单个核像有两个核一样，速度要比二核二线程要快。
了解了基本信息之后，来看看JavaScript的多线程--web workers。
web workers
HTML5引入了Web Workers，让JavaScript支持多线程。接下来用Web Workers做一个斐波那契函数来举例：
// worker.js
function fibonacci(n) {
function fib(n, v1, v2) {
if (n == 1)
return v1;
if (n == 2)
return v2;
else
return fib(n - 1, v2, v1 + v2);
}
return fib(n, 1, 1)
}
// 通过onmessage回调函数接收主线程的数据
onmessage = function (e) {
// 通过e.data接收从主线程中传过来的数据。
var num = e.data;
var result = fibonacci(num);
// 通过postMessage向主线程传输结果。
postMessage(result);
}
把这个函数写到worker.js中。接着在index.js文件中使用new关键字，调用Worker()构造函数，新建一个Worker线程。
var worker = new Worker('worker.js文件的url');
worker.onmessage = function (e) {
console.log("result: " + e.data);
}
worker.postMessage(100);
worker.terminate();
Worker()构造函数的参数是刚刚定义的worker脚本文件。但是Worker构造函数不能读取本地文件，所以这个脚本必须来自网络。然后，调用worker.postMessage()方法，向Worker发消息。最后，主通过worker.onmessage指定监听函数，接收Worker发回来的消息。Worker完成任务以后，就可以把它关掉。
数据通信
主线程与Worker之间的通信内容，可以是基本类型的，也可以是引用类型的，而且是通过值传递的。Worker对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容通过类似JSON.stringify()的api将内容转为字符串，再传给Worker，后者将其还原。
正如所想的那样，这种方式会造成性能问题。当主线程向Worker发送几百上千兆大小的文件，默认情况下浏览器会将其拷贝一份。为了解决这个问题，JavaScript允许主线程通过TransferableObjects方法把数据直接转移给Worker线程，但是一旦传输了，主线程就再也无法使用这些数据了。这是为了防止出现多个线程同时处理数据的风险。
// Transferable Objects 格式
worker.postMessage(arrayBuffer, [arrayBuffer]);
// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
内联Web Worker
一般来说，Web Worker的载入是一个单独的JavaScript脚本文件，但也是可以与主线程用一个文件中载入：