Web Workerの紹介と使い方

1. Web ワーカーの概要

JavaScript はシングルスレッド言語です。つまり、ページ内ではすべての JavaScript コードが同じスレッドで実行されます。シングルスレッドモデルでは、すべてのタスクが順番に実行されるため、タスクの完了に時間がかかると、他のタスクの実行がブロックされます。 HTML5 では、Web Workers テクノロジを導入しています。これにより、ブラウザ内で複数の JavaScript スレッドを作成し、バックグラウンドで計算負荷の高いタスクを実行できるため、メインスレッドのブロックが回避されます。 Web Worker は、メインスレッドとは異なるコンテキストで実行され、メインスレッドから完全に独立した独立した JavaScript プログラムであり、ページをブロックすることなく、長期的な操作の実行、大量のデータの処理、サーバーとの通信が可能です。ユーザーインターフェース。

Web Workers には次のような利点があります。

ページのパフォーマンスの向上: Web ワーカーは、メインスレッドを占有することなく、データ処理や画像処理などの計算集約型または時間のかかる一部の操作をバックグラウンドスレッドで実行できるため、ページの遅延やフリーズが回避され、ページのパフォーマンスが向上します。そして応答速度。
大規模なデータを処理できる: Web ワーカーは別のスレッドで実行され、メインスレッドの動作に影響を与えないため、大規模なデータを処理できます。大規模なデータをより効率的に処理でき、コードの効率とスケーラビリティが向上します。 . セックス。
コードをよりモジュール化できる: Web Worker を使用すると、コードを複数のモジュールに分割し、異なるスレッドで実行できるため、コードがよりモジュール化され、保守しやすく、読みやすくなります。
マルチスレッドのサポート: Web Worker はマルチスレッドをサポートしているため、マルチコアプロセッサを利用してコードの実行効率を向上させることができます。

2. Web Workerの作成と利用

2.1 ワーカーの作成

メインスレッドで new Worker() コンストラクターを使用して、新しい Worker オブジェクトを作成します。次に例を示します。

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

ここ worker.js は、ワーカーのエントリポイントとして機能する独立した JavaScript ファイルです。 Worker インスタンスが作成されると、ブラウザは worker.js ファイルを別の実行環境に読み込み、実行を開始します。

2.2 メッセージを送信する

Worker オブジェクトの postMessage() メソッドを使用して、ワーカースレッド (worker.js) にメッセージを送信します。例えば：

worker.postMessage('Hello, worker!');

2.3 ワーカースレッド (worker.js) でのメッセージの処理

ワーカースレッド worker.js では、onmessage イベントリスナーを使用してメインスレッドからメッセージを受信し、postMessage() メソッドを使用してメインスレッドにメッセージを送信できます。例えば：

onmessage = function(e) {
    
    
  console.log('Message received from main thread:', e.data);
  postMessage('Hello, main thread!');
}

ここでの onmessage 関数は、メインスレッドがメッセージを送信するときに呼び出され、「こんにちは、メインスレッド!」がメインスレッドに返されます。

2.4 メッセージイベントの監視

メインスレッドでは、onmessage イベントリスナーを使用してワーカースレッドからメッセージを受信できます。例えば：

Worker.onmessage = function(e) {
    
    
  console.log('Message received from worker:', e.data);
}

2.5 Web ワーカーの終了

Web Worker を使用すると、メモリなどの特定のシステムリソースが占有されます。作成したワーカーが多すぎる場合、またはワーカーを閉じることに失敗した場合、システムリソースが消費され、アプリケーション全体のパフォーマンスに影響します。したがって、リソースリークを回避し、システムパフォーマンスを向上させるために、ワーカーが不要になったときに適切なタイミングでワーカーをシャットダウンする必要があります。 Web ワーカーは Worker.terminate() メソッドを使用してシャットダウンできます。

// 关闭Web Worker
worker.terminate();

2.6 worker.js ファイルの読み込みリファレンス

HTMLで参照するにはworker.jsファイルを使用します

 <!-- 将worker.js文件包含在HTML中 -->
 <script src="worker.js"></script>

JavaScript コードで直接参照される

<!-- worker.js和主程序在同一文件夹下 -->
const worker = new Worker('worker.js');
<!-- worker.js和主程序不在同一文件夹下 -->
const worker = new Worker('../resource/fundids/js/worker_diff.js');  3

worker.js に他の JavaScript コードを読み込む
Web ワーカーでは、ページ内の DOM 要素や JavaScript オブジェクトに直接アクセスできません。 Web ワーカーが他の JavaScript コードにアクセスする必要がある場合は、importScripts() メソッドを使用してそれらのコードをロードできます。 importScripts() メソッドは、ロードする必要がある JavaScript ファイルの URL である 1 つ以上のパラメーターを受け入れることができます。これらのファイルがロードされるとすぐに実行され、Web Worker のグローバルスコープで定義されたすべての変数と関数が Web Worker で使用できるようになります。

Web ワーカーで importScripts() メソッドを使用して追加の JavaScript コードをロードする方法を示す例を次に示します。
```
// 在这里可以使用在file1.js和file2.js中定义的变量和函数
importScripts("file1.js", "file2.js");
```

2.5 Web Worker インスタンスの使用

<!DOCTYPE html>
<html>
  <head>
    <title>Web Worker 斐波那契数列</title>
    <script>
       // 创建一个新的 Web Worker，指定 worker.js 文件作为代码文件
      const worker = new Worker('worker.js');
      // 向 Web Worker 发送一个消息
      worker.postMessage(100);
      // 监听 Web Worker 返回的结果
      worker.onmessage = function(event) {
      
      
        console.log('斐波那契数列:', event.data);
        var resultElement = document.getElementById("result");
        resultElement.innerHTML += "<span>"+event.data+"</span>";
      };

    </script>
  </head>
  <body>
    <h1>Web Worker Example</h1>
    <div id="result"></div> 
  </body>
</html>

worker.js ファイルには、フィボナッチ数列を計算するコードを実装できます。

// 监听来自主线程的消息
onmessage = function(event) {
    
    
  const n = event.data;
  var result = fibonacciArray(n);
  // 将结果发送回主线程
  postMessage(result);
};
// 计算斐波那契数列
function fibonacciArray(n) {
    
    
  var fib = [1, 1];  // 前两个数字是1
  for (var i = 2; i < n; i++) {
    
    
    fib[i] = fib[i-1] + fib[i-2];  // 计算下一个数字并添加到数组中
  }
  return fib;
}

この例では、Web ワーカーを使用してフィボナッチ数列を計算します。メインスレッドが Web ワーカーにメッセージを送信すると、Web ワーカーはフィボナッチ数列の計算を開始し、結果をメインスレッドに送り返します。フィボナッチ数列の計算には時間がかかる場合があるため、Web ワーカーを使用すると、メインスレッドのブロックが回避され、ページのパフォーマンスとユーザーエクスペリエンスが向上します。

3. Web ワーカーの欠陥

DOM に直接アクセスできない: Web ワーカーは別のスレッドで実行され、メインスレッドの DOM に直接アクセスできないため、通信には postMessage() メソッドなどの特別なメソッドが必要です。
メインスレッドの JavaScript オブジェクトにアクセスできない: Web ワーカーはスレッド内で独立して実行され、メインスレッドの JavaScript オブジェクトに直接アクセスできません。データ転送にはシリアル化や逆シリアル化などのテクノロジを使用する必要があります。
ローカルファイルをロードできません: Web Worker はネットワーク経由でのみ JavaScript ファイルをロードでき、ローカルファイルを直接ロードすることはできません。
同期操作を実行できません: 同期操作は Web ワーカーのスレッドをブロックするため、Web ワーカーはファイルの読み取りやユーザー入力の待機などの同期操作を実行できません。
すべてのブラウザでサポートされているわけではありません: Web Worker はすべてのブラウザでサポートされているわけではありません。特に一部の古いブラウザでは Web Worker がサポートされていない可能性があります。
```
if (typeof(Worker) !== "undefined") {
      
      
  // 支持webworker
}
```

4. Web ワーカーとバックエンドがデータを送信する

Web ワーカーはメインスレッドで DOM に直接アクセスできません。これは、Web ワーカーがページの HTML 要素を直接操作したり、ブラウザの URL を変更したりできないことを意味します。ただし、Web ワーカーは、XMLHTTPRequest や Fetch API などのテクノロジを使用してサーバーからデータを取得し、メッセージングメカニズムを通じてメインスレッドにデータを送信できます。

4.1 XMLHttpRequestの使用

// 监听从主线程发送来的消息
onmessage = function(event) {
    
    
  var data = event.data;
  var newData = [];
  for (var i = 0; i < data.length; i++) {
    
    
   _add(data[i]);
  };
};
function _add(d,flag) {
    
    
  var num1 = d.num1;
  var num2 = d.num2;
  var id = d.id;
  // 创建 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();
  // 监听请求状态变化事件
  xhr.onreadystatechange = function() {
    
    
  if (xhr.readyState == 4 && xhr.status == 200) {
    
     // 请求成功
    result = {
    
    "id":id, "num1":num1, "num2":num2, "result":xhr.responseText};
    postMessage(result);
  }
  };
  // 发送 AJAX 请求
  xhr.open("POST", "/test/WebWorkers/add_ajax.tsl", true); // 打开请求连接
  //  xhr.setRequestHeader("Content-type", "application/json"); // 设置请求头
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 // var data = {dowhat:'add', num1:num1, num2:num2}; // 定义要发送的数据并转换为 JSON 字符串
 // xhr.send(JSON.stringify(data)); // 发送数据
  var data = new URLSearchParams();
  data.append("num1",num1);
  data.append("num2",num2);
  xhr.send(data); // 发送数据
}

4.2 APIの取得

function _add2(d){
    
    
  var num1 = d.num1;
  var num2 = d.num2;
  var id = d.id;
  //var data = new URLSearchParams();
  var formData = new FormData();
  formData.append("num1",num1);
  formData.append("num2",num2);

  fetch("/test/WebWorkers/add_ajax.tsl", {
    
    
    method: 'POST',
    body: formData
  })
    .then(response => response.json())
    .then(data => {
    
    
      result = {
    
    "id":id, "num1":num1, "num2":num2, "result":data};
      postMessage(result);
    })
    .catch(error => console.error(error))
}

FormData は、フォームデータを処理するための JavaScript API です。XMLHttpRequest または fetch() メソッドを通じてフォームデータをバックエンドサーバーに送信できます。 FormData オブジェクトには、フォームデータの構築に使用できるキーと値のペアのリストが含まれています。 FormData オブジェクトの append() メソッドを使用して、キーと値のペアを FormData オブジェクトに追加できます。
上記のように、FormData() はフォームの形式でデータを送信するために使用され、バックエンドは Q("name") を介してデータを直接取得できます。異なる形式のデータが送信された場合json 文字列など、現在のバックエンドフロントエンドパラメーターの取得方法がサポートされていない可能性があります。

6. 応用シナリオ

Web Worker のいくつかのアプリケーションシナリオ:

画像処理: Web アプリケーションでは、多くの場合、画像の処理、サイズ変更、トリミングが必要になります。これらの操作は CPU 時間とメモリリソースを大量に消費し、ページがスタックする原因となる場合があります。 Web ワーカーを使用すると、メインスレッドのブロックを避けるために、バックグラウンドスレッドでこれらの計算負荷の高いタスクを実行できます。
データコンピューティング: 大規模なデータセットの場合、データマイニング、機械学習、人工知能などの複雑な計算とデータ分析が必要です。これらのタスクには多くのコンピューティングリソースと時間が必要ですが、Web Workers を使用すると、コンピューティングタスクを複数のスレッドに分散してコンピューティングを高速化できます。
バックグラウンドリクエスト: Web アプリケーションでは、サーバーとの対話、ファイルの読み書きなど、いくつかのバックグラウンドリクエストとデータ処理が必要になる場合があります。 Web ワーカーを使用すると、これらのタスクをバックグラウンドスレッドで実行し、メインスレッドのブロックを回避し、アプリケーションのパフォーマンスと応答速度を向上させることができます。
マルチメディア処理: Web アプリケーションでは、オーディオやビデオなどのマルチメディアリソースの処理とトランスコードが必要になることが多く、これらのタスクには大量のコンピューティングリソースと時間が必要です。 Web ワーカーを使用すると、メインスレッドのブロックを回避するために、バックグラウンドスレッドでこれらのタスクを実行できます。

Web Workers はすべてのシナリオに対応するソリューションではないことに注意することが重要です。一部の単純なタスクでは、Web ワーカーを使用するとコードが複雑になり、追加のオーバーヘッドとパフォーマンスの問題が発生する可能性があります。したがって、Web ワーカーを適用する場合は、特定の状況に基づいて評価して選択する必要があります。