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

链接：JavaScript与多线程的不解之缘！

来源：github