Web Worker
Web Worker は、Web コンテンツがバックグラウンドでスクリプトを実行できるようにする簡単な方法を提供します。ワーカーが作成されると、その作成者が指定したイベント リスナー関数にメッセージを渡すことができるため、ワーカーによって生成されたすべてのタスクがこれらのメッセージを受信します
ワーカー スレッドは、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() を使用することもできます。 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('#num').value,10); //2.将数据传递给子线程
worker.postMessage(num);
} //3.从子线程接收处理结果并展示
worker.onmessage = function(event){
alert('总和为：'+ 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);
}可以将比较耗时的处理交给一个后台线程，去处理，处理完之后将结果返回给主页面。
线程之间进行数据交互
线程间的数据交互是通过发送和接收消息来相互传递信息的，主线程首先创建Worker，通过Worker对象的postMessage方法，将数据传递给后台线程，而主程序通过onmessage 事件，或者自定义addEventListener<!DOCTYPE html><html><head>
<title>线程之间进行数据交互</title></head><body>
<h2 id="线程之间进行数据交互">线程之间进行数据交互</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('td');
tr.appendChild(td);
td.innerHTML = numArr[i];
td.width = "30";
}
} </script></html> 例の最初の行は、新しいワーカー スレッドを作成します。 3 行目は、ワーカー上のメッセージ イベントのリスナー関数を設定します。このイベント ハンドラーは、ワーカーが独自の postMessage() 関数を呼び出すときに呼び出されます。最後に、7 行目でワーカー スレッドを開始します。
共有
ではなくコピー
を通じて行われます。ワーカーに渡されるオブジェクトはシリアル化
する必要があり、その後、反対側で逆シリアル化する必要があります。ページとワーカーは同じインスタンスを共有しないため、最終的には各通信の終了時にデータのコピーが生成されます。ほとんどのブラウザは、構造化コピーを使用してこの機能を実装します。
例:合計を計算するサブスレッドを作成する
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);
}<!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 id="从随机生成的数字中抽取-的倍数并显示示例">从随机生成的数字中抽取3的倍数并显示示例</h1><table id="table"></table></body>時間のかかる処理をバックグラウンドスレッドに渡して処理し、処理後に結果をメインページに返すことができます。 
スレッドスレッド間のデータ対話
スレッド間のデータ対話は、メッセージの送受信によって相互に情報を転送します。
メイン スレッドは最初に Worker を作成し、Worker オブジェクトの postMessage メソッドを通じてデータをバックグラウンド スレッドに渡します。 onmessage イベントを渡すか、バックグラウンドをリッスンしてバックグラウンド スレッド処理の結果を返すようにaddEventListener イベントをカスタマイズします。同様に、バックグラウンド スレッドは、メイン ページから onmessage イベントを通じて渡されたデータを受け取り、処理結果を postMessage を通じてメイン ページに返します。 例: ページ シーケンスは 100 個のデータをランダムに生成し、そのデータをフィルタリングのためにバックグラウンド スレッドに渡します。3 で均等に分割できるデータはメイン ページに返され、動的テーブルの形式で表示されます。
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);
}
}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();
}スレッド間のネスト サブスレッドはスレッド内にネストできるため、より大きなバックグラウンド スレッドを複数のサブスレッドに分割でき、各サブスレッド グリッドは比較的独立した作業を完了できます。
上記の例を引き続き使用して、単一層のサブスレッドのネストの例を構築します。メインページで乱数を生成する以前の作業をバックグラウンド スレッドに組み込み、次にバックグラウンド スレッド内に 3 で割ることができるデータを選択するサブスレッドを構築します。渡されるデータは JSON データ形式です。
<!DOCTYPE html><html><head>
<title>线程之间进行数据交互</title></head><body>
<h2 id="线程之间进行数据交互">线程之间进行数据交互</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>script.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);
}
}🎜🎜worker2.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);
}🎜🎜🎜🎜 サブスレッドにメッセージを配信する場合は、worker.postMessage を使用します。メイン ページにデータを送信する場合は、worker.postMessage を使用します。 postMessage を直接🎜🎜 複数のサブスレッド間のデータ対話🎜var worker = new SharedWorker('sharedworker.js', ’ mysharedworker ’ );🎜🎜worker1.js コード🎜🎜
// 从端口接收数据 , 包括文本数据以及结构化数据
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']});🎜🎜worker3.js コード🎜🎜<!DOCTYPE html><html><head>
<title>单个页面的SharedWorker</title></head><body>
<h2 id="单个页面的SharedWorker">单个页面的SharedWorker</h2>
<p id="show"></p>
<script type="text/javascript">
var worker = new SharedWorker('test.js'); var p = document.querySelector('#show');
worker.port.onmessage = function(e){
p.innerHTML = e.data;
} </script></body></html>🎜SharedWorker 共有スレッド🎜🎜🎜共有スレッド🎜🎜
共有スレッドは 2 つの方法で定義できます。1 つは、JavaScript スクリプト リソースを指す URL を作成する方法、または明示的な名前を使用する方法です。明示的な名前で定義すると、共有スレッドを作成した最初のページで使用された URL が、共有スレッドの JavaScript スクリプト リソース URL として使用されます。このようにして、同じドメイン内の複数のアプリケーションが共通のサービスを提供する同じ共有スレッドを使用できるようになり、すべてのアプリケーションが共通のサービスを提供する URL との接続を維持する必要がなくなります。 🎜🎜どのような状況であっても、共有スレッドのスコープまたは有効範囲は、それが作成されたドメインによって定義されます。したがって、同じ共有スレッド名を使用する 2 つの異なるサイト (つまり、ドメイン) が競合することはありません。 🎜共享线程的创建
创建共享线程可以通过使用 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 id="单个页面的SharedWorker">单个页面的SharedWorker</h2>
<p id="show"></p>
<script type="text/javascript">
var worker = new SharedWorker('test.js'); var p = document.querySelector('#show');
worker.port.onmessage = function(e){
p.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 p = document.getElementById('p1');
worker.port.addEventListener('message', function(e) {
p.innerHTML=e.data;
}, false);
worker.port.start();
worker.port.postMessage(1);
}</script></head><body onload="window_onload()"><h1 id="在两个页面中共享后台线程">在两个页面中共享后台线程</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('test2.js'); var p = document.getElementById('p1');
worker.port.addEventListener('message', 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('get');
}</script></head><body onload="window_onload()"><h1 id="在多个页面中通过共享后台线程来共享数据">在多个页面中通过共享后台线程来共享数据</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);
}
}在一个页面中点击发送数据，然后在另外一个页面点击接受数据，可以得到发送的数据。
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('#num').value,10); //2.将数据传递给子线程
worker.postMessage(num);
} //3.从子线程接收处理结果并展示
worker.onmessage = function(event){
alert('总和为：'+ 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);
}可以将比较耗时的处理交给一个后台线程，去处理，处理完之后将结果返回给主页面。
线程之间进行数据交互
线程间的数据交互是通过发送和接收消息来相互传递信息的，主线程首先创建Worker，通过Worker对象的postMessage方法，将数据传递给后台线程，而主程序通过onmessage 事件，或者自定义addEventListener 事件来监听后台返回后台线程处理的结果。同样，后台线程通过onmessage事件来接收主页面传递的数据，通过postMessage将处理结果返回给主页面。
实例：页面序随机产生100个数据，并将数据传递给后台线程过滤，将可以被3 整除的数据，返回给主页面，以动态表格的形式显示。
<!DOCTYPE html><html><head>
<title>线程之间进行数据交互</title></head><body>
<h2 id="线程之间进行数据交互">线程之间进行数据交互</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('td');
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);
}
线程间的嵌套
线程中可以嵌套子线程，这样可以把一个较大的后台线程切分成几个子线程，每个子线程格子完成相对独立的工作。
还是使用上述的实例，构造一个单层子线程嵌套的例子。把之前主页面生成随机数的工作放到后台线程，然后在后台线程中构造一个子线程，来挑选出可以被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 id="从随机生成的数字中抽取-的倍数并显示示例">从随机生成的数字中抽取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 id="线程之间进行数据交互">线程之间进行数据交互</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 id="单个页面的SharedWorker">单个页面的SharedWorker</h2>
<p id="show"></p>
<script type="text/javascript">
var worker = new SharedWorker('test.js'); var p = document.querySelector('#show');
worker.port.onmessage = function(e){
p.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 p = document.getElementById('p1');
worker.port.addEventListener('message', function(e) {
p.innerHTML=e.data;
}, false);
worker.port.start();
worker.port.postMessage(1);
}</script></head><body onload="window_onload()"><h1 id="在两个页面中共享后台线程">在两个页面中共享后台线程</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('test2.js'); var p = document.getElementById('p1');
worker.port.addEventListener('message', 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('get');
}</script></head><body onload="window_onload()"><h1 id="在多个页面中通过共享后台线程来共享数据">在多个页面中通过共享后台线程来共享数据</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的内容，更多相关内容请关注PHP中文网（www.php.cn）！
H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AMH5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。
H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AMHTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。
HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AMHTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。
HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AMHTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。
H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AMクリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。
H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AMH5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。
H5コードの分解：タグ、要素、属性Apr 18, 2025 am 12:06 AMHTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。
H5コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AMHTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
