Web ワーカーを使用すると、Web ユーザー インターフェイスをブロックせずに JavaScript コードをバックグラウンドで実行できます。 Web ワーカーは、Web ページの全体的なパフォーマンスを向上させ、ユーザー エクスペリエンスも向上させることができます。 Web ワーカーには、専用 Web ワーカーと共有 Web ワーカーの 2 種類があります。この記事では、アプリケーションで Web ワーカーを使用するかどうかを決定するために知っておく必要がある、Web ワーカーの 7 つの重要な側面について説明します。
通常、Web ページに記述した JavaScript コードは、ユーザー インターフェイスと同じスレッドで実行されます。これが、長いプロセスを引き起こすボタンをクリックすると Web ページのユーザー インターフェイスがフリーズする理由です。処理が完了するまで、ユーザー インターフェイスで作業することはできません。 Web ワーカーを使用すると、JavaScript をバックグラウンドで実行できるため、いくつかのスクリプトが同時に実行されている場合でも、ユーザー インターフェイスの応答性が維持されます。スクリプトを実行するバックグラウンド スレッドは、ワーカー スレッドまたはワーカーと呼ばれることがよくあります。必要なだけワーカーを生成できます。ワーカー スレッドで実行中のスクリプトにデータを渡し、完了時に値をメイン スレッドに返すこともできます。ただし、Web Workers には次のようないくつかの制限があります:
Web ワーカーは Web ページから DOM 要素にアクセスできません。
Web ワーカーは、Web ページからグローバル変数や JavaScript 関数にアクセスできません。
Web ワーカーは、alert() 関数またはconfirm() 関数を呼び出すことができません。
Web Workers では、ウィンドウ、ドキュメント、親などのオブジェクトにアクセスできません。
ただし、setTimeout()、setInterval() などの関数は使用できます。 XMLHttpRequest オブジェクトを使用して、サーバーに対して Ajax リクエストを行うこともできます。
Web ワーカーには、専用 Web ワーカーと共有 Web ワーカーの 2 種類があります。専任の Web ワーカーは、自分たちを作成する Web ページとともに生き、そして死んでいきます。これは、Web ページ内で作成された専用 Web ワーカーには、複数の Web ページ間でアクセスできないことを意味します。一方、共有 Web ワーカーは、複数の Web ページ間で共有されます。 Worker クラスは専用の Web ワーカーを表し、SharedWorker クラスは共有 Web ワーカーを表します。
多くの場合、専任の Web ワーカーがお客様のニーズに応えます。これは、通常、Web ページの特定のスクリプトをワーカー スレッドで実行する必要があるためです。ただし、場合によっては、複数の Web ページに共通のワーカー スレッドでスクリプトを実行する必要があります。この場合、各ページに 1 つずつ、多数の専用 Web ワーカーを作成する代わりに、共有 Web ワーカーを使用することもできます。 1 つの Web ページで作成された共有 Web ワーカーは、他の Web ページでも引き続き使用できます。すべての接続が閉じられている場合にのみ破棄できます。共有 Web ワーカーは、専用 Web ワーカーよりも少し複雑です。
Web ワーカーの基本を理解したところで、専用の Web ワーカーの使用方法を見てみましょう。以下で説明する例では、お気に入りの開発ツールを使用して Web アプリケーションを作成し、その Script フォルダーに jQuery ライブラリと Modernizr ライブラリを追加していることを前提としています。 HTML ページを Web アプリケーションに追加し、次のコードを入力します:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/modernizr.js"></script>
<script src="scripts/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if (!Modernizr.webworkers)
{
alert("This browser doesn't support Web Workers!");
return;
}
$("#btnStart").click(function () {
var worker = new Worker("scripts/lengthytask.js");
worker.addEventListener("message", function (evt) {
alert(evt.data);
},false);
worker.postMessage(10000);
});
});
</script>
</head>
<body>
<form>
<input type="button" id="btnStart" value="Start Processing" />
</form>
</body>
</html>上記の HTML ページには、JavaScript 処理をトリガーするボタン (btnStart) が含まれています。このページは、Modernizr ライブラリと jQuery ライブラリを参照していることに注意してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
