html5 多线程处理webWorker_&quot；new worker( &quot；my_task

最新推荐文章于 2024-08-26 18:44:09 发布

2401_85123543

最新推荐文章于 2024-08-26 18:44:09 发布

阅读量334

点赞数 5

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2401_85123543/article/details/139624377

版权

这里写图片描述

线程间的嵌套

线程中可以嵌套子线程，这样可以把一个较大的后台线程切分成几个子线程，每个子线程格子完成相对独立的工作。

还是使用上述的实例，构造一个单层子线程嵌套的例子。把之前主页面生成随机数的工作放到后台线程，然后在后台线程中构造一个子线程，来挑选出可以被3整除的数据。传递的数据采用JSON的数据格式。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var worker = new Worker("script.js");
worker.postMessage("");
// 从线程中取得计算结果
worker.onmessage = function(event) {
 if(event.data!="")
 {
 var j; //行号
 var k; //列号
 var tr;
 var td;
 var intArray=event.data.split(";");
 var table=document.getElementById("table");
 for(var i=0;i<intArray.length;i++)
 { 
 j=parseInt(i/10,0);
 k=i%10;
 if(k==0) //该行不存在
 {
 //添加行
 tr=document.createElement("tr");
 tr.id="tr"+j;
 table.appendChild(tr);
 }
 else //该行已存在
 {
 //获取该行
 tr=document.getElementById("tr"+j);
 }
 //添加列
 td=document.createElement("td");
 tr.appendChild(td);
 //设置该列内容
 td.innerHTML=intArray[j\*10+k];
 //设置该列背景色
 td.style.backgroundColor="blue";
 //设置该列字体颜色
 td.style.color="white";
 //设置列宽
 td.width="30";
 }
 }
};
</script>
</head>
<body>
<h1>从随机生成的数字中抽取3的倍数并显示示例</h1>
<table id="table">
</table>
</body>

script.js子线程代码

onmessage=function(event){
    var intArray=new Array(100);    //随机数组
    //生成100个随机数
    for(var i=0;i<100;i++)
        intArray[i]=parseInt(Math.random()*100);
    var worker;
    //创建子线程
    worker=new Worker("worker2.js");
    //把随机数组提交给子线程进行挑选工作
    worker.postMessage(JSON.stringify(intArray));
    worker.onmessage = function(event) {
        //把挑选结果返回主页面
        postMessage(event.data);
    }
}

worker2.js代码

onmessage = function(event) {
    //还原整数数组
    var intArray= JSON.parse(event.data);
    var returnStr;
    returnStr="";
    for(var i=0;i<intArray.length;i++)
    {
        //能否被3整除
        if(parseInt(intArray[i])%3==0)    
        {
            if(returnStr!="")
                returnStr+=";";
            //将能被3整除的数字拼接成字符串
            returnStr+=intArray[i];    
        }
    }
    //返回拼接字符串
    postMessage(returnStr); 
    //关闭子线程 
    close();                         
}

这里写图片描述

向子线程传递消息时，用worker.postMessage,向主页面提交数据时直接用postMessage.

多个子线程之间的数据交互

<!DOCTYPE html>
<html>
<head>
    <title>线程之间进行数据交互</title>
</head>
<body>
    <h2>线程之间进行数据交互</h2>
    <table id="table" style="color: #FFF;background-color: #ccc;">

    </table>
</body>
    <script type="text/javascript">

 var worker1 = new Worker("worker1.js");
 worker1.postMessage("");

 //从子线程获取处理结果
 worker1.onmessage = function(event){
 var row,
 col,
 tr,
 td,
 table = document.querySelector("#table");
 var numArr = event.data.split(";");

 for(var i = 0; i<numArr.length; i++){
 row = parseInt(i/10);
 col = i%10;
 if (col == 0 ) {
 tr = document.createElement("tr");
 tr.id = "tr" + row;
 table.appendChild(tr);
 }else{
 tr = document.querySelector("#tr" + row);
 }
 td = document.createElement('td');
 tr.appendChild(td);
 td.innerHTML = numArr[i];
 td.width = "30";
 }
 }
 </script>
</html>

worker1.js代码

onmessage = function(event){
    var data = event.data;
    var dataArr = new Array(100);
    for(var i=0; i<100; i++){
        dataArr[i] = parseInt(Math.random()*100);
    }

    //创建新的子进程
    var worker2 = new Worker("worker3.js");
    //worker.postMessage传递JSON对象
    worker2.postMessage(JSON.stringify(dataArr));

    worker2.onmessage = function(event){
        //postMessage将数据返回给主页面
        postMessage(event.data);
    }

}

worker3.js代码

onmessage = function(event){
    var numArr = JSON.parse(event.data);
    var returnNum = "";
    for(var i =0; i<numArr.length; i++){
        if (numArr[i]%3 ==0) {
            returnNum += numArr[i] + ";";
        }
    }
    postMessage(returnNum);

}

SharedWorker共享线程

共享线程
共享线程可以由两种方式来定义：一是通过指向 JavaScript 脚本资源的 URL 来创建，而是通过显式的名称。当由显式的名称来定义的时候，由创建这个共享线程的第一个页面中使用 URL 会被用来作为这个共享线程的 JavaScript 脚本资源 URL。通过这样一种方式，它允许同域中的多个应用程序使用同一个提供公共服务的共享线程，从而不需要所有的应用程序都去与这个提供公共服务的 URL 保持联系。

无论在什么情况下，共享线程的作用域或者是生效范围都是由创建它的域来定义的。因此，两个不同的站点（即域）使用相同的共享线程名称也不会冲突。

共享线程的创建
创建共享线程可以通过使用 SharedWorker() 构造函数来实现，这个构造函数使用 URL 作为第一个参数，即是指向 JavaScript 资源文件的 URL，同时，如果开发人员提供了第二个构造参数，那么这个参数将被用于作为这个共享线程的名称。创建共享线程的代码示例如下：

var worker = new SharedWorker('sharedworker.js', ’ mysharedworker ’ );

与共享线程通信
共享线程的通信也是跟专用线程一样，是通过使用隐式的 MessagePort 对象实例来完成的。当使用 SharedWorker() 构造函数的时候，这个对象将通过一种引用的方式被返回回来。我们可以通过这个引用的 port 端口属性来与它进行通信。发送消息与接收消息的代码示例如下：

 // 从端口接收数据 , 包括文本数据以及结构化数据
 worker.port.onmessage = function (event) { define your logic here... }; 
 // 向端口发送普通文本数据
worker.port.postMessage('put your message here … '); 
 // 向端口发送结构化数据
worker.port.postMessage(
{ username: 'usertext';
 live_city: 
     ['data-one', 'data-two', 'data-three','data- four']});

上面示例代码中，第一个我们使用 onmessage 事件处理器来接收消息，第二个使用 postMessage 来发送普通文本数据，第三个使用 postMessage 来发送结构化的数据，这里我们使用了 JSON 数据格式。

实例1：在单个页面中使用sharedWorker

<!DOCTYPE html>
<html>
<head>
    <title>单个页面的SharedWorker</title>
</head>
<body>
    <h2>单个页面的SharedWorker</h2>
    <div id="show"></div>
    <script type="text/javascript">
 var worker = new SharedWorker('test.js');
 var div = document.querySelector('#show');

 worker.port.onmessage = function(e){
 div.innerHTML = e.data;
 }

 </script>
</body>
</html>

onconnect = function(e){
    var port = e.ports[0];
    port.postMessage('你好！');
}

实例2：在多个页面中使用sharedWorker

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在两个页面中共享后台线程</title>
<script type="text/javascript">
var worker;
function window\_onload(){
 worker = new SharedWorker('test.js');
 var div = document.getElementById('div1');
 worker.port.addEventListener('message', function(e) {
 div.innerHTML=e.data;
 }, false);
 worker.port.start();
 worker.port.postMessage(1);
}
</script>
</head>
<body onload="window\_onload()">
<h1>在两个页面中共享后台线程</h1>
<div id="div1"></div>
</body>
</html>

onconnect = function(e) {
   var port = e.ports[0];
   port.onmessage = function(e) {
     port.postMessage(e.data*e.data);
   }
}

只要发送不同的数据就可以worker.port.postMessage(1);返回不同的结果。

实例3：在多个页面中，通过共享后台线程来共享数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在多个页面中通过共享后台线程来共享数据</title>


### js基础
1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

![js基础.PNG](https://img-blog.csdnimg.cn/img_convert/28a8e79a0ab3af85d9d99279e3a9cb51.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/86132a01d1edb00f0a2d1069acb6de84.webp?x-oss-process=image/format,png)

>
<title>在多个页面中通过共享后台线程来共享数据</title>


### js基础
1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中...(img-9Tit0i8n-1718170926277)]

[外链图片转存中...(img-lkEl8v1B-1718170926278)]