JavaScript与多线程的不解之缘！

本文主要是介绍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;elsereturn 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>

必须指定

然后，读取这段嵌入页面的脚本，用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').stylerwLock.unlock();return style;
}