html5 멀티스레딩 webWorker-H5 튜토리얼-php.cn

Web Worker

Web Worker는 웹 콘텐츠가 백그라운드에서 스크립트를 실행할 수 있도록 하는 간단한 방법을 제공합니다. 작업자가 생성되면 작성자가 지정한 이벤트 리스너 함수에 메시지를 전달할 수 있으므로 작업자가 생성한 모든 작업이 이러한 메시지를 받게 됩니다.

작업자 스레드는 UI를 방해하지 않고 메시지를 전달할 수 있습니다. 작업. 또한 XMLHttpRequest를 사용하여(responseXML 및 채널 속성 값은 항상 null임에도 불구하고) I/O 작업을 수행할 수도 있습니다.

작업자 생성

새 작업자를 생성하는 방법은 매우 간단합니다. 작업자 스레드 내에서 실행할 스크립트의 URI를 지정하여 Worker() 생성자를 호출하기만 하면 작업자의 알림을 받으려면 작업자의 onmessage 속성을 특정 이벤트 핸들러로 설정할 수 있습니다.

var myWorker = new Worker("my_task.js");

myWorker.onmessage = function (oEvent) {
  console.log("Called back by the worker!\n");
};

로그인 후 복사

또는 다음을 사용할 수 있습니다. addEventListener():

var myWorker = new Worker("my_task.js");

myWorker.addEventListener("message", function (oEvent) {
  console.log("Called back by the worker!\n");
}, false);

myWorker.postMessage(""); // start the worker.

로그인 후 복사

예제의 첫 번째 줄은 새 작업자 스레드를 생성합니다. 세 번째 줄은 작업자의 메시지 이벤트에 대한 리스너 함수를 설정합니다. 이 이벤트 핸들러는 작업자가 자체 postMessage() 함수를 호출할 때 호출됩니다. 마지막으로 7행에서는 작업자 스레드를 시작합니다.

데이터 전송

메인페이지와 작업자 간 데이터 전송은 공유가 아닌 복사를 통해 완료됩니다. 작업자에게 전달된 객체는 직렬화한 다음 반대쪽에서 역직렬화해야 합니다. 페이지와 작업자는 동일한 인스턴스를 공유하지 않으며 최종 결과는 각 통신이 끝날 때 데이터 복사본이 생성된다는 것입니다. 대부분의 브라우저는 구조화된 사본을 사용하여 이 기능을 구현합니다.

예: 합계를 계산하기 위한 하위 스레드 생성

<!DOCTYPE html><html><head>
    <title>webWorkers 实例演示</title></head><body>
    请输入要求和的数：<input type="text" id="num"><br>
    <button onclick="caculate()">计算</button>

    <script type="text/javascript">
        //1.创建计算的子线程
        var worker = new Worker("worker1.js");        function caculate(){
            var num = parseInt(document.querySelector(&#39;#num&#39;).value,10);            //2.将数据传递给子线程
            worker.postMessage(num);
        }        //3.从子线程接收处理结果并展示
        worker.onmessage = function(event){
            alert(&#39;总和为：&#39;+ event.data);
        }    </script></body></html>

로그인 후 복사

rrree

시간이 많이 걸리는 처리를 백그라운드 스레드에 넘겨 처리한 다음 처리 후 결과 메인 페이지로 돌아갑니다.

html5 멀티스레딩 webWorker

스레드 간 데이터 상호 작용

스레드 간 데이터 상호 작용은 메시지를 주고받으며 서로 정보를 전달합니다. 메인 스레드는 먼저 Worker를 생성합니다. Worker 객체의 postMessage 메소드를 통해 데이터를 백그라운드 스레드에 전달합니다. 기본 프로그램은 백그라운드를 수신하고 onmessage 이벤트 또는 사용자 정의 addEventListener 이벤트를 통해 백그라운드 스레드 처리 결과를 반환합니다. 마찬가지로 백그라운드 스레드는 onmessage 이벤트를 통해 메인 페이지에서 전달된 데이터를 수신하고, postMessage를 통해 처리 결과를 메인 페이지에 반환합니다.

예: 페이지 시퀀스는 무작위로 100개의 데이터를 생성하고 필터링을 위해 데이터를 백그라운드 스레드에 전달합니다. 3으로 균등하게 나눌 수 있는 데이터가 메인 페이지로 반환되어 형식으로 표시됩니다. 동적 테이블의

onmessage = function(event){
    var result =0,
    num  = event.data;    for(var i = 1; i < num ;i ++){
        result += i;
    }    //向主线程返回消息
    postMessage(result);
}

로그인 후 복사

<!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 nums = new Array(100),
        intStr = "";        //1.处理非字符串数据
        for(var i = 0; i<100; i++){
            nums[i] = parseInt(Math.random()*100);
            intStr += nums[i] + ";";
        }        //2.创建新进程
        var worker = new Worker("worker2.js");        //3.向子进程发送数据
        worker.postMessage(intStr);        //4.从子线程获取处理结果
        worker.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(&#39;td&#39;);
                tr.appendChild(td);
                td.innerHTML = numArr[i];
                td.width = "30";
            }
        }    </script></html>

로그인 후 복사

html5 멀티스레딩 webWorker

스레드 간 중첩

하위 스레드는 스레드에 중첩될 수 있으므로 더 큰 배경 스레드를 각각 여러 하위 스레드로 나눌 수 있습니다. 하위 스레드 그리드는 비교적 독립적인 작업을 완료합니다.

여전히 위의 예를 사용하여 단일 레이어 하위 스레드 중첩의 예를 구성합니다. 메인 페이지에서 난수를 생성하는 이전 작업을 백그라운드 스레드에 넣은 후, 백그라운드 스레드에 서브 스레드를 구성하여 3으로 나눌 수 있는 데이터를 선택합니다. 전달되는 데이터는 JSON 데이터 형식입니다.

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

}

로그인 후 복사

script.js 하위 스레드 코드

<!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>

로그인 후 복사

worker2.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);
    }
}

로그인 후 복사

html5 멀티스레딩 webWorker

하위 스레드로 메시지를 전달할 때는 작업자.postMessage를 사용하세요. 메인 페이지에 데이터를 제출할 때는 postMessage를 직접 사용하세요.

여러 하위 스레드 간 데이터 상호작용

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();                         
}

로그인 후 복사

worker1.js 코드

<!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(&#39;td&#39;);
                tr.appendChild(td);
                td.innerHTML = numArr[i];
                td.width = "30";
            }
        }    </script></html>

로그인 후 복사

worker3.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);
    }

}

로그인 후 복사

SharedWorker 공유 스레드

공유 스레드
공유 스레드는 두 가지 방법으로 정의할 수 있습니다. 첫 번째는 JavaScript 스크립트 리소스를 가리키는 URL을 생성하고 명시적으로 이름을 지정하는 것입니다. 명시적인 이름으로 정의되면 공유 스레드를 생성한 첫 번째 페이지에 사용된 URL이 공유 스레드에 대한 JavaScript 스크립트 리소스 URL로 사용됩니다. 이러한 방식으로 동일한 도메인의 여러 애플리케이션이 공통 서비스를 제공하는 동일한 공유 스레드를 사용할 수 있으므로 모든 애플리케이션이 공통 서비스를 제공하는 URL과의 연결을 유지할 필요가 없습니다.

어쨌든 공유 스레드의 범위 또는 유효 범위는 스레드가 생성된 도메인에 따라 정의됩니다. 따라서 동일한 공유 스레드 이름을 사용하는 두 개의 다른 사이트(예: 도메인)가 충돌하지 않습니다.

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

var worker = new SharedWorker(&#39;sharedworker.js&#39;, ’ mysharedworker ’ );

로그인 후 복사

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

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

로그인 후 복사

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

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

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

        worker.port.onmessage = function(e){
            p.innerHTML = e.data;
        }    </script></body></html>

로그인 후 복사

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

로그인 후 복사

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>在两个页面中共享后台线程</title><script type="text/javascript">var worker;function window_onload(){
    worker = new SharedWorker(&#39;test.js&#39;);    var p = document.getElementById(&#39;p1&#39;);
    worker.port.addEventListener(&#39;message&#39;, function(e) {
       p.innerHTML=e.data;
    }, false);
    worker.port.start();
    worker.port.postMessage(1);
}</script></head><body onload="window_onload()"><h1>在两个页面中共享后台线程</h1><p id="p1"></p></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><script type="text/javascript">var worker;function window_onload(){
    worker = new SharedWorker(&#39;test2.js&#39;);    var p = document.getElementById(&#39;p1&#39;);
    worker.port.addEventListener(&#39;message&#39;, function(e) {
       document.getElementById("text").value=e.data;
    }, false);
    worker.port.start();
}function SendData(){
    worker.port.postMessage(document.getElementById("text").value);
}function getData(){
    worker.port.postMessage(&#39;get&#39;);
}</script></head><body onload="window_onload()"><h1>在多个页面中通过共享后台线程来共享数据</h1><input type="text" id="text"></input><button onclick="SendData()">提交数据</button><button onclick="getData()">获取数据</button></body></html>

로그인 후 복사

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

로그인 후 복사

在一个页面中点击发送数据，然后在另外一个页面点击接受数据，可以得到发送的数据。

html5 멀티스레딩 webWorker

Web Worker

Web Worker提供了一个简单的方法使得 web 内容能够在后台运行脚本。一旦 worker 创建后，它可以向由它的创建者指定的事件监听函数传递消息，这样该 worker 生成的所有任务就都会接收到这些消息

worker 线程能够在不干扰 UI 的情况下执行任务。另外，它还能够使用 XMLHttpRequest (虽然 responseXML 与 channel 两个属性值始终是 null)来执行 I/O 操作。

生成 worker

创建一个新的 worker 十分简单。你所要做的就是调用 Worker() 构造函数，指定一个要在 worker 线程内运行的脚本的 URI，如果你希望能够收到 worker 的通知，可以将 worker 的 onmessage 属性设置成一个特定的事件处理函数。

var myWorker = new Worker("my_task.js");

myWorker.onmessage = function (oEvent) {
  console.log("Called back by the worker!\n");
};

로그인 후 복사

或者，你也可以使用 addEventListener()：

var myWorker = new Worker("my_task.js");

myWorker.addEventListener("message", function (oEvent) {
  console.log("Called back by the worker!\n");
}, false);

myWorker.postMessage(""); // start the worker.

로그인 후 복사

例子中的第一行创建了一个新的 worker 线程。第三行为 worker 设置了 message 事件的监听函数。当 worker 调用自己的 postMessage() 函数时就会调用这个事件处理函数。最后，第七行启动了 worker 线程。

传递数据

在主页面与 worker 之间传递的数据是通过拷贝，而不是共享来完成的。传递给 worker 的对象需要经过序列化，接下来在另一端还需要反序列化。页面与 worker 不会共享同一个实例，最终的结果就是在每次通信结束时生成了数据的一个副本。大部分浏览器使用结构化拷贝来实现该特性。

实例：创建一个子线程来计算求和

<!DOCTYPE html><html><head>
    <title>webWorkers 实例演示</title></head><body>
    请输入要求和的数：<input type="text" id="num"><br>
    <button onclick="caculate()">计算</button>

    <script type="text/javascript">
        //1.创建计算的子线程
        var worker = new Worker("worker1.js");        function caculate(){
            var num = parseInt(document.querySelector(&#39;#num&#39;).value,10);            //2.将数据传递给子线程
            worker.postMessage(num);
        }        //3.从子线程接收处理结果并展示
        worker.onmessage = function(event){
            alert(&#39;总和为：&#39;+ event.data);
        }    </script></body></html>

로그인 후 복사

onmessage = function(event){
    var result =0,
    num  = event.data;    for(var i = 1; i < num ;i ++){
        result += i;
    }    //向主线程返回消息
    postMessage(result);
}

로그인 후 복사

可以将比较耗时的处理交给一个后台线程，去处理，处理完之后将结果返回给主页面。

html5 멀티스레딩 webWorker

线程之间进行数据交互

线程间的数据交互是通过发送和接收消息来相互传递信息的，主线程首先创建Worker，通过Worker对象的postMessage方法，将数据传递给后台线程，而主程序通过onmessage 事件，或者自定义addEventListener 事件来监听后台返回后台线程处理的结果。同样，后台线程通过onmessage事件来接收主页面传递的数据，通过postMessage将处理结果返回给主页面。

实例：页面序随机产生100个数据，并将数据传递给后台线程过滤，将可以被3 整除的数据，返回给主页面，以动态表格的形式显示。

<!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 nums = new Array(100),
        intStr = "";        //1.处理非字符串数据
        for(var i = 0; i<100; i++){
            nums[i] = parseInt(Math.random()*100);
            intStr += nums[i] + ";";
        }        //2.创建新进程
        var worker = new Worker("worker2.js");        //3.向子进程发送数据
        worker.postMessage(intStr);        //4.从子线程获取处理结果
        worker.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(&#39;td&#39;);
                tr.appendChild(td);
                td.innerHTML = numArr[i];
                td.width = "30";
            }
        }    </script></html>

로그인 후 복사

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

}

로그인 후 복사

html5 멀티스레딩 webWorker

线程间的嵌套

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

还是使用上述的实例，构造一个单层子线程嵌套的例子。把之前主页面生成随机数的工作放到后台线程，然后在后台线程中构造一个子线程，来挑选出可以被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();                         
}

로그인 후 복사

html5 멀티스레딩 webWorker

向子线程传递消息时，用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(&#39;td&#39;);
                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 保持联系。

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

var worker = new SharedWorker(&#39;sharedworker.js&#39;, ’ mysharedworker ’ );

로그인 후 복사

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

로그인 후 복사

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

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

        worker.port.onmessage = function(e){
            p.innerHTML = e.data;
        }    </script></body></html>

로그인 후 복사

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

로그인 후 복사

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>在两个页面中共享后台线程</title><script type="text/javascript">var worker;function window_onload(){
    worker = new SharedWorker(&#39;test.js&#39;);    var p = document.getElementById(&#39;p1&#39;);
    worker.port.addEventListener(&#39;message&#39;, function(e) {
       p.innerHTML=e.data;
    }, false);
    worker.port.start();
    worker.port.postMessage(1);
}</script></head><body onload="window_onload()"><h1>在两个页面中共享后台线程</h1><p id="p1"></p></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><script type="text/javascript">var worker;function window_onload(){
    worker = new SharedWorker(&#39;test2.js&#39;);    var p = document.getElementById(&#39;p1&#39;);
    worker.port.addEventListener(&#39;message&#39;, function(e) {
       document.getElementById("text").value=e.data;
    }, false);
    worker.port.start();
}function SendData(){
    worker.port.postMessage(document.getElementById("text").value);
}function getData(){
    worker.port.postMessage(&#39;get&#39;);
}</script></head><body onload="window_onload()"><h1>在多个页面中通过共享后台线程来共享数据</h1><input type="text" id="text"></input><button onclick="SendData()">提交数据</button><button onclick="getData()">获取数据</button></body></html>

로그인 후 복사

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

로그인 후 복사

在一个页面中点击发送数据，然后在另外一个页面点击接受数据，可以得到发送的数据。

html5 멀티스레딩 webWorker

以上就是html5 多线程处理webWorker的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

html5 멀티스레딩 webWorker

Web Worker

작업자 생성

데이터 전송

스레드 간 데이터 상호 작용

스레드 간 중첩

여러 하위 스레드 간 데이터 상호작용

SharedWorker 공유 스레드

Web Worker

生成 worker

传递数据

线程之间进行数据交互

线程间的嵌套

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

SharedWorker共享线程