JavaScript与多线程的不解之缘！
前言
对于前端开发者来说，多线程是一个比较陌生的话题。因为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脚本文件，但也是可以与主线程用一个文件中载入：
<!DOCTYPE html>
<body>
<script id='worker' type='app/worker'>
function fibonacci(n) {
...
}
// 通过onmessage回调函数接收主线程的数据
onmessage = function (e) {
// 通过e.data接收从主线程中传过来的数据。
var num = e.data;
var result = fibonacci(num);
// 通过postMessage向主线程传输结果。
postMessage(result);
}
</script>
</body>
</html>
必须指定<script>标签的type属性是一个浏览器不认识的值，比如app/worker
然后，读取这段嵌入页面的脚本，用Worker来处理
var blob = new Blob([document.querySelector('#worker').textContent]); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); worker.onmessage = function (e) { console.log("result: " + e.data); } worker.postMessage(100);
先将嵌入网页的脚本代码，转为一个二进制对象，然后为这个二进制对象生成URL，再让Worker加URL。done
线程同步
最后来说说JavaScript版本的线程同步。
由于Web Workers是不可以操作DOM的，因为同一个DOM节点只能有一个线程操作，不允许同一个变量或者内存被同时写入。
如果web Workers可以操作DOM呢？那会怎么样，当然是要用到线程同步的方式限制线程写入。
同步的意思是协同、互相配合的意思，按照预定的先后次序进行运行。比如说线程A和线程B同步，A执行到一定程度时要依赖B的某个运行结果，那么就必须先停下来，让B运行，B运行完后，把结果给到A，A再继续操作。
线程同步主要是靠锁来实现的，可以分为以下3种：
「互斥锁」
var mutext = new Mutext(); function changeDOM (style) { mutext.lock(); document.getElementById('app').style = style; mutext.unlock(); } // worker1 changeStyle({width: 100px}); // worker2 changeStyle({width: 150px});
在改变某个DOM元素的样式时，先把这部分代码的执行给锁住了，只有执行完了才释放这把锁，其他线程运行到这时也要去申请那把锁，但是由于这把锁没有被释放，所以它就阻塞在那里，只有等到锁被释放了，它才能拿到这把锁再继续加锁。
互斥锁使用太多会导致性能下降，因为线程阻塞在那里而且还要不断的检测锁能不能用，所以要占用CPU。
「读写锁」
var rwLock = new ReadWriteLock(); function changeStyle (style) { rwLock.writeLock(); document.getElementById('app').style = style; rwLock.unlock(); } function getStyle () { rwLock.readLock(); var style = document.getElementById('app').style rwLock.unlock(); return style; }
在第二个函数getStyle()获取样式时可以给它加一个读锁，这样其他线程如果想读是可以同时读的，但是不允许有一个线程写入。如果有线程调用了第一个函数，那么调用第二个函数的线程都会被阻塞，因为在写的过程中，不运行被读取。
「条件变量」
条件变量是为解决生产者和消费者的问题，由于互斥锁和读写锁会导致线程一直阻塞而且占用CPU，而使用信号通知的方式可以先让阻塞的线程进入睡眠状态，等生产者生产出东西后通知消费者，再唤醒它进行消费。
然而现实上JavaScript是没有线程同步的概念。因为webWorker是无法操作DOM，也没有window对象，每个线程的数据都是独立的。前面说过是通过拷贝复制的方式传递的。所以不存在共享同一块内存区域。
作者： zhangwinwin来源：github
