web Workers多线程

在html5中，实现了一个新的标准就是web Workers多线程。
众所周知，JavaScript是单线程，如果程序运算过多的话，会出现页面卡卡的现象，这种是异步也无法解决的问题。而web Workers的出现，就是来解决这种问题的。web Workers的出现，我们可以将运算时间过长的表达式分离在一个额外的线程内，而只需要在web Workers运算结束时，将数据传回主线程即可，这样会有效的减少主线程的压力，提高用户的体验度。
接下来，我们看一下如何实现一个最简单的web Workers案例：

使用web workers，首先要先判断一下当前的浏览器是否支持：

    //首先判断当前浏览器是否支持web Workers
    if (!window.Worker) {
        alert("你的电脑不支持web Workers");
    }

在支持的情况下，我们需要通过传入一个js文件的路径，来创建Worker对象：

    //然后生成一个新的线程
    let myWorker = new Worker('worker.js');

上面我创建了一个名字为worker.js的js文件，作为引用。myWorker对象就是一个额外线程的对象。

我们在主线程，通过myWorker.postMessage给Worker传递数据，通过myWorker.onmessage来回去返回的数据

    //绑定事件
    input.oninput = function () {
        //通过web worker对象将数据传递给web worker线程
        myWorker.postMessage(input.value);
    };

    //使用onmessage以响应worker回传的消息
    myWorker.onmessage = function(e) {
        result.textContent = e.data;
        console.log('获取到从worker里面传递来的信息');
    }

而在worker.js文件内，可以通过postMessage给主线程传递数据，onmessage来接收数据，因为在Worker线程内，这两个是全局函数，所以我们不需要和在主线程内一样指定对象。

如果想关闭一个多线程，我们可以在主线程通过调用：

myWorker.terminate();

或者在Worker线程内直接调用：

close();

来关闭线程。

如果在Worker内需要额外引入其它的库：

importScripts();                        /* 什么都不引入 */
importScripts('foo.js');                /* 只引入 "foo.js" */
importScripts('foo.js', 'bar.js');      /* 引入两个脚本 */

如果出现错误，我们可以通过onerror回调获取错误：

    myWorker.onerror = function(e){
        console.log(e.message); //报错信息
        console.log(e.filename); //报错文件路径
    };

接下来，我把全部代码贴一下：
index.html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web Workers案例</title>
</head>
<body>
<input type="text" id="input">
<textarea name="" id="result" cols="30" rows="10"></textarea>
</body>
<script>
    //首先判断当前浏览器是否支持web Workers
    if (!window.Worker) {
        alert("你的电脑不支持web Workers");
    }

    //然后生成一个新的线程
    let myWorker = new Worker('worker.js');

    myWorker.onerror = function(e){
        console.log(e.message); //报错信息
        console.log(e.filename); //报错文件路径
    };

    //获取到input
    let input = document.getElementById("input");

    //绑定事件
    input.oninput = function () {
        //通过web worker对象将数据传递给web worker线程
        myWorker.postMessage(input.value);
    };

    //获取到web worker 里面返回的信息，并填充到textarea里面
    let result = document.getElementById("result");
    //使用onmessage以响应worker回传的消息
    myWorker.onmessage = function(e) {
        result.textContent = e.data;
        console.log('获取到从worker里面传递来的信息');
    }


</script>
</html>

worker.js代码：

//使用onmessage回调函数来获取从主线程传递来的数据
onmessage = function(e) {
    var workerResult = 'Result: ' + e.data * 5; //将获取到的值乘以5再返回
    postMessage(workerResult); //调用postMessage将数据传递给主线程
};

猜你喜欢