在平时的运行的javascript脚本都在主线程中执行，如果当前脚本包含复杂的、耗时的代码。那么JavaScript脚本的执行将会被阻塞，甚至整个刘看齐都是提示失去响应。

例子：

假设程序需要计算、收集1~9999的之间所有质数，不采用后台线程，而是之间是使用JavaScript前台线程的计算、收集质数。代码如下。

<html>

<head>

    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

    <title> 计算质数 </title>

</head>

<body>

    <p>已经发现的所有质数：<div id="result"></div></p>

    <script type="text/javascript">

        var n = 1;

        search:

        while (n < 99999)

        {

            // 开始搜寻下一个质数

            n += 1;

            for (var i = 2; i <= Math.sqrt(n); i++)

            {

                // 如果除以n的余数为0，开始判断下一个数字。

                if (n % i == 0)

                {

                    continue search;

                }

            }

            document.getElementById('result').innerHTML += (n + ", ");

        }

    </script>

</body>

</html>

浏览器久久未响应，一篇空白。最后过来七八秒全部崩出来。如果改为使用webWorker启用多线程呢？使用Worker创建贤臣非常简单，只要调用Worker的构造器就可以。

Worker(scriptURL):scriptURL用于指定所使用JavaScript脚本的路径

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script>

        var worker = new Worker('worker12.js');

        worker.onmessage = function (event) {

            document.getElementById("result").innerHTML += event.data + ",";

        }

    </script>

</head>

<body>

    <p>

        已经发现的所有质数：<div id="result" style="width: 1500px; height:auto; border:1px solid red; word-wrap: break-word; ">

        </div>

    </p>

</body>

</html>

Worker.js

var n = 1;

search:

while (n < 10000) {

    // 开始搜寻下一个质数

    n += 1;

    for (var i = 2; i <= Math.sqrt(n); i++) {

        // 如果除以n的余数为0，开始判断下一个数字。

        if (n % i == 0) {

            continue search;

        }

    }

    // 发现质数

    postMessage(n);

}

注意：

Worker启动的子线程找到质数之后，并不能之间把找到的质数更新在页面上显示，必须通过postMessage(n)发送消息给前台JavaScript通信。

例子2：Worker线程交换数据：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>多个线程交换数据</title>

    <script>

        var car = function () {

            var start = document.getElementById("start1").value;

            var end = document.getElementById("end1").value;

            if (start >= end) {

                return;

            } else {

                var cal = new Worker("Worker.js");

                // 定义需要提交给Worker线程的数据

                var data = {

                    start: start,

                    end: end

                };

                // 向Worker线程提交数据。

                cal.postMessage(JSON.stringify(data));

                cal.onmessage = function (event) {

                    document.getElementById("result").innerHTML += event.data + ",";

                }

            }

        }

    </script>

</head>

<body>

    起始值：<input type="text" id="start1" /><br />

    结束值：<input type="text" id="end1" /><br />

    <input type="button" value="点击" onclick="car();" />

    <div id="result" style="width: 1500px; height: auto; border: 1px solid red; word-wrap: break-word;">

    </div>

</body>

</html>

worker.js

onmessage = function (event) {

    // 将数据提取出来。

    var data = JSON.parse(event.data);

    // 取出start参数

    var start = data.start;

    // 取出end参数

    var end = data.end;

    var result = "";

    search:

    for (var n = start; n <= end; n++) {

        for (var i = 2; i <= Math.sqrt(n); i++) {

            // 如果除以n的余数为0，开始判断下一个数字。

            if (n % i == 0) {

                continue search;

            }

        }

        // 搜集找到的质数

        result += (n + ",");

    }

    // 发送消息，将会触发前台JavaScript脚本中

    // Worker对象的onmessage方法

    postMessage(result);

}

例子3：多个线程嵌套

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>多个线程嵌套 </title>

    <script>

        var car = function () {

            var start = document.getElementById("start1").value;

            var end = document.getElementById("end1").value;

            var count = document.getElementById("count1").value;

            var worker = new Worker('worker.js');

            var data = {

                start: start,

                end: end,

                count: count

            };

            worker.postMessage(JSON.stringify(data));

            worker.onmessage = function (event) {

                document.getElementById("result").innerHTML += event.data + ",";

            }

        }

    </script>

</head>

<body>

    起始值：<input type="text" id="start1" /><br />

    结束值：<input type="text" id="end1" /><br />

    个数：<input type="text" id="count1" /><br />

    <input type="button" value="点击" onclick="car();" />

    <div id="result" style="width: 1500px; height: auto; border: 1px solid red; word-wrap: break-word;">

    </div>

</body>

</html>

worker.js

onmessage = function (event) {

    // 将数据提取出来。

    var data = JSON.parse(event.data);

    // 取出start参数

    var start = data.start;

    // 取出end参数

    var end = data.end;

    // 取出count参数

    var count = data.count;

    var result = "";

    search:

    for (var n = start; n <= end; n++) {

        for (var i = 2; i <= Math.sqrt(n); i++) {

            // 如果除以n的余数为0，开始判断下一个数字。

            if (n % i == 0) {

                continue search;

            }

        }

        // 搜集找到的质数

        result += (n + ",");

    }

    // 再次启动Worker线程

    var sub = new Worker("subworker.js");

    // 把需要处理的数据传入启动的Worker线程中

    sub.postMessage({ result: result, count: count });

    sub.onmessage = function (event) {

        // 发送消息，将会触发前台JavaScript脚本中

        // Worker对象的onmessage方法

        postMessage(event.data);

    }

}

subworker.js

onmessage = function (event) {

    // 将数据提取出来。

    var data = event.data;

    // 提取所有质数

    var primeNums = data.result.split(",")

    var randResult = "";

    for (var i = 0; i < data.count; i++) {

        // 计算一个随机索引值

        var randIndex = Math.floor(Math.random()

            * (primeNums.length - 1));

        // 随机地"收集"一个质数

        randResult += (primeNums[randIndex] + ",");

    }

    // 发送消息，将会触发启动它的JavaScript脚本中

    // 对应Worker对象的onmessage方法

    postMessage(randResult);

}

js Worker 线程的更多相关文章

  1. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

  2. 前端框架小实验-在umi框架中以worker线程方式使用SQL.js的wasm

    总述:在Win7环境下配置umijs框架,在框架中用worker线程方式使用SQL.js的wasm,在浏览器端实现数据的增删改查以及数据库导出导入. 一.安装node.js 1.Win7系统只支持no ...

  3. HTML5_06之拖放API、Worker线程、Storage存储

    1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象:  var 全局变量=null;  src.ondragstart=function(){   全局变量=数据值;  ...

  4. 模板应用--UI线程与worker线程同步 模仿c# invoke

    由之前的一篇博文 <UI线程与worker线程><UI线程与worker线程>引出,UI线程与worker线程“串行化”在win32上实现是多么没有节操的事情,代码编写麻烦不说 ...

  5. UI线程与worker线程

    也谈谈我对UI线程和worker线程的理解 UI线程又叫界面线程,能够响应操作系统的特定消息,包括界面消息.鼠标键盘消息.自定义消息等,是在普通的worker线程基础上加上消息循环来实现的,在这个消息 ...

  6. JS引擎线程的执行过程的三个阶段（二）

    继续JS引擎线程的执行过程的三个阶段(一) 内容, 如下: 三. 执行阶段 1. 网页的线程 永远只有JS引擎线程在执行JS脚本程序,其他三个线程只负责将满足触发条件的处理函数推进事件队列,等待JS引 ...

  7. JS引擎线程的执行过程的三个阶段（一）

    浏览器首先按顺序加载由<script>标签分割的js代码块,加载js代码块完毕后,立刻进入以下三个阶段,然后再按顺序查找下一个代码块,再继续执行以下三个阶段,无论是外部脚本文件(不异步加载 ...

  8. 在netty3.x中存在两种线程：boss线程和worker线程。

    在netty 3.x 中存在两种线程:boss线程和worker线程.

  9. 前端之JS的线程(最易懂)

    1. 前言 很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象.还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解. 我们都知道J ...

随机推荐

  1. visual studio开发工具的C#主流控件属性一览表

    visual studio开发工具的C#主流控件属性一览表 详细的介绍了各控制属性的详细中文介绍 C#控件及常用设计整理 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程 ...

  2. 论文笔记：目标检测算法（R-CNN，Fast R-CNN，Faster R-CNN，FPN，YOLOv1-v3）

    R-CNN(Region-based CNN) motivation:之前的视觉任务大多数考虑使用SIFT和HOG特征,而近年来CNN和ImageNet的出现使得图像分类问题取得重大突破,那么这方面的 ...

  3. centos下删除名称为乱码的文件

    1.通过ls -li 获取要删除乱码文件名文件的inode号,比如得到的是 146506

  4. vux在ISO中异常 this.$vux.confirm.show

    在按钮事件中调用this.$vux.confirm.show,并且启用按钮的show-loading属性 安卓正常,ios中弹窗无法显示 经过排查,iso中设置按钮的loading后,要用异步setT ...

  5. linux配置Nginx启动，停止

    Nginx 启动.重启.停止脚本   第一步 先运行命令关闭nginx sudo kill `cat /usr/local/nginx/logs/nginx.pid`   第二步 vi /etc/in ...

  6. hive + hadoop 环境搭建

    机器规划: 主机 ip 进程 hadoop1 10.183.225.158 hive server hadoop2 10.183.225.166 hive client 前置条建: kerberos部 ...

  7. golang test 单元测试

    golang自家的单元测试做的很好了,自需要"文件名_test.go" 就可以在里面写单元测试,而且go test命令也很强大,可以只运行单个测试函数,在goland 可以点击单元 ...

  8. 20145231熊梓宏 《网络对抗》 实验5 MSF基础应用

    20145231熊梓宏 <网络对抗> 实验5 MSF基础应用 基础问题回答 1.用自己的话解释什么是exploit,payload,encode? exploit就相当于是就是渗透攻击,其 ...

  9. [BZOJ1117]救火站gas

    Description 给你一棵树,现在要建立一些消防站,有以下要求: 1. 消防站要建立在节点上,每个节点可能建立不只一个消防站. 2. 每个节点应该被一个消防站管理,这个消防站不一定建立在该节点上 ...

  10. POJ-1458 LCS（线性动态规划）

    此题经典线性动态规划. 代码如下: #include<iostream> #include<cstdio> #include<cstdlib> #include&l ...