javascript多线程--web workers实现线程间数据交互的小测试

web worker 是运行在后台的 JavaScript,不会影响页面的性能。

实现一个非常简单的web workers例子:

一.先来看一个反面教材:

模拟一个耗时运算用传统方式实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea id="textareaId"></textarea>
</body>
<script>
     var num = 5000000000;
     var r = 0;
     var i=num;
     for (;i;i--) {
        r += i;
     }
     //直接处理耗时操作,结果浏览器直接卡爆,等了一分钟都没反应。
    document.getElementById("textareaId").innerHTML= r;
</script>
</html>
由此可见这样的方式处理耗时操作不好玩儿。


二.web workers小实例:

web workers的方法还有很多,但是我这里就只实现最简单的功能,两个线程之间数据的交互,一个线程我把它称为JS线程,一个为worker线程,其中worker线程是处理耗时运算的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //第一步:JS线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker,它会异步加载并执行这个JavaScript文件。这里的JavaScript文件就是自己写的worker.js。
        var worker = new Worker('worker.js');

        //第五步:通过worker.onmessage接受worker线程的运算结果
        worker.onmessage = function (e) {
            //结果:大概等了5、6秒,运算结果就优雅的显示在了文本框中。
            document.getElementById("textareaId").innerHTML= e.data;
        };

        //第二步:把数据通过worker.postMessage发送到worker线程
        (function() {
            var num = 5000000000;
            worker.postMessage(num);
        })();

    </script>
</head>
<body>
    <textarea id="textareaId"></textarea>
</body>
</html>
//这是worker.js文件
//第三步:通过onmessage接受JS线程postMessage(num)发送的数据;e.data就是num
onmessage = function (e) {
    var num = e.data;
    var r = 0;
    var i=num;
    for (;i;i--) {
        r += i;
    }
    //第四步:处理耗时运算完毕,用postMessage把运算结果返回给JS线程
    postMessage(r);
};





你可能感兴趣的:(JavaScript,多线程,Web,Workers)