HTML5 については、新鮮な機能や興味深い API がたくさんあります。しかし、多くの子供向け靴は依然としてセマンティック段階に留まり、HTML5 の力を無視しています。
このセクションでは、マルチスレッド Web ワーカーについて説明します。
1. JavaScript がシングルスレッドであることを明確にするJavaScript 言語の主な特徴は、シングルスレッドであることです。つまり、一度に 1 つのことしか実行できません。
奇妙に聞こえるかもしれませんが、効率を向上させるためにマルチスレッドで設計してみてはいかがでしょうか?次のようなシナリオを想定できます。
JavaScript同時に 2 つのスレッドがあるとします。1 つのスレッドが特定のDOMノードにコンテンツを追加し、もう 1 つのスレッドがそのノードを削除するとします。この場合、ブラウザーはどちらのスレッドを使用する必要がありますか?
ブラウザのスクリプト言語としてのJavaScriptの主な目的は、ユーザーと対話し、 DOM操作することです。
これにより、シングルスレッドのみが可能であることが決まります。そうでない場合は、非常に複雑な同期の問題が発生します。複雑さを避けるために、 JavaScript誕生以来シングルスレッドであり、これは言語の中核的な機能となっており、短期的には変更するのが難しいと予想されています。
シングル スレッドは常に問題点であり、マルチコアCPUの計算能力を活用するために、 HTML5 JavaScriptスクリプトで複数のスレッドを作成できるようにするWeb Worker標準を提案しています。ただし、子スレッドはメインスレッドによって完全に制御されるため、 DOM操作してはなりません。
したがって、この新しい標準はJavaScriptのシングルスレッドの性質を変更しません。
Web Workers 、最新のブラウザによって提供されるJavaScriptマルチスレッド ソリューションです。次のような多くの使用シナリオがあります。
1. Web Worker使用して、計算負荷の高い操作を実行できます。
2. ポーリングを実装し、特定の状態を変更できます。
3. ヘッダー メッセージのステータス更新。ページ ヘッダー内のメッセージ数の通知など。
4. 高頻度のユーザー インタラクション、スペル チェックなど: ユーザーが入力エラーを修正し、ユーザーの入力習慣、履歴記録、キャッシュ、その他の情報に基づいて修正機能を完了できるように支援します。
5. 暗号化: 特に大量のデータを頻繁に暗号化する必要がある場合 (たとえば、サーバーに送信する前にデータを暗号化する場合)、暗号化には非常に時間がかかることがあります。
6. データのプリフェッチ: Web サイトまたは Web アプリケーションを最適化し、データの読み込み時間を短縮するために、 Workers使用できます。
必要に応じて事前にデータをロードします。
暗号化はDOMやその他の魔法へのアクセスを必要とせず、純粋にアルゴリズムを使用して計算を実行するだけなので、 Web Worker使用するための優れたシナリオです。機密性の高い個人データに対する世間の注目が高まるにつれ、情報セキュリティと暗号化が最優先事項になっています。これは、最近の 12,306 件のユーザー データ漏洩事件から反映されている可能性があります。
Worker で計算が実行されると、ユーザーにとってはシームレスであり、ユーザー エクスペリエンスには影響しません。
3. 互換性4. 基本的な概念1. まずサポートされているかどうかを判断することを忘れないでください
if (window.Worker) { ...} 2. 新しいworkerの作成は簡単です
const myWorker = new Worker('worker.js');postMessage() メソッドと onmessage イベント ハンドラーは、ワーカーの黒魔術です。
3. postMessageはメッセージの送信に使用され、 onmessageメッセージの受信に使用されます。
const worker = new Worker('src/worker.js');worker.onmessage = e => { console.log(e.data);};worker.postMessage('お元気ですか!');メインスレッドで使用する場合、 onmessageとpostMessage() workerオブジェクトでハングする必要がありますが、 workerで使用する場合は必要ありません。その理由は、 worker内部では、 worker事実上グローバル スコープであるためです。
4.例外処理:
worker.onerror = function(error) { console.log(error.message); }; 5. worker終了させる
ワーカー.終了();
workerスレッドは、操作を完了したりクリーンアップしたりすることなく、ただちに強制終了されます。
6. workerスレッドでは、 workers独自のcloseメソッドを呼び出して閉じることもできます。
近い（）;5. クイックスタート
すぐに理解するために、小さな例を見てみましょう。プロジェクトの構造は次のとおりです。
∴──index.html────src §──main.js────worker.js
HTML
<html><head> <title>Web 作業デモ</title> <meta charset=UTF-8 /></head><body> <div id=app> こんにちは、Jartto! /main.js></script></body></html>
メイン.js
const worker = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[From Worker]: ${message}`); ('app').innerHTML = message;};worker.postMessage('よく書けました!');Work.js
onmessage = e => { const message = e.data; console.log(`[メインから]: ${message}`); if(message.indexOf('Good') > -1) { postMessage('ありがとうございますあなたのサポートのために ');コードは非常に単純です。メインスレッドは「とてもよく書かれています!」というメッセージを送ります。
Web ワーカーはメッセージを受信し、その内容に「good」という単語が含まれていることを発見し、「ご支援ありがとうございます」というメッセージをメインスレッドに送り返しました。
6. 制限事項1. worker内では、 DOMノードを直接操作することはできず、 windowオブジェクトのデフォルトのメソッドとプロパティは使用できません。ただし、 WebSockets 、 IndexedDB 、 FireFox OS固有のData Store APIなどのデータ ストレージ メカニズムを含む、 windowオブジェクトの下で多数のものを使用できます。
以下に例を示します。 main.jsを変更します。
const worker = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[From Worker]: ${message}`); ('app').innerHTML = メッセージ;};+worker.onerror = function(error) {+console.log(error);+worker.terminate();+ };worker.postMessage('よく書けました!');もう一度work.js修正しましょう
+alert('jartto');onmessage = e => { const message = e.data; console.log(`[メインから]: ${message}`); if(message.indexOf('good') 1) { postMessage('ご支援ありがとうございます');現時点では、実行すると次のレポートが表示されます。
これは、 worker.jsが実行されるコンテキストが、メイン ページのHTMLが実行されるコンテキストとは異なるためです。トップレベル オブジェクトは、 woker.js実行のグローバル コンテキストであるWindowではなく、 WorkerGlobalScopeです。詳しく説明しましょう。
2. workersとメイン スレッド間のデータ転送は、このようなメッセージ メカニズムを通じて実行されます。両者はpostMessage()メソッドを使用して独自のメッセージを送信し、 onmessageイベント ハンドラーを使用してメッセージに応答します (メッセージはMessageイベントのdata属性）。
このプロセスでは、データは共有されずにコピーされます。
3. 同一オリジン制限
Workerスレッドに割り当てられるスクリプト ファイルは、メイン スレッドのスクリプト ファイルと同じ起源を持つ必要があります。
4. ファイル制限
Workerスレッドはローカル ファイルを読み取ることができません。つまり、ローカル ファイル システム（file://）を開くことができません。スクリプトはサーバーから取得する必要があります。
5. ローカルファイルは許可されません
キャッチされない SecurityError: ワーカーの作成に失敗しました:
「(パス)/worker.js」のスクリプト
オリジン「null」からはアクセスできません。
Chrome では、ローカル ファイルからスクリプトを実行するときに Web ワーカーを読み込むことができません。
では、どうすれば解決できるでしょうか？ローカルサーバーを起動できます。シンプルで使いやすいhttp-server使用することをお勧めします。
6. コンテンツセキュリティポリシー
worker 、それを作成したdocumentオブジェクトとは異なる独自の実行コンテキストがあります。したがって、一般的に言えば、 workerそれを作成したdocument (または親worker ) のコンテンツ セキュリティ ポリシーによって制限されません。
document次のヘッダー宣言があると仮定して、例を見てみましょう。
コンテンツ セキュリティ ポリシー: script-src 'self'
この宣言の目的の 1 つは、宣言内に含まれるスクリプト コードによるeval()メソッドの使用を禁止することです。ただし、スクリプト コードがworker作成する場合、 workerのコンテキストで実行されるコードはeval()を使用できます。
ワーカーの CSP を指定するには、ワーカー コードを送信するリクエスト自体に CSP を追加する必要があります。
1 つの例外は、 workerスクリプトのソースがグローバルに一意識別子の場合 (たとえば、そのURLデータ スキーマまたはblobを指定している場合)、 workerそれを作成したdocumentまたはworker CSP継承することです。
については、 MDNでドキュメントを見つけることができます。
1. self ：
WorkerGlobalScopeのselfプロパティを使用して、オブジェクト自体への参照を取得できます。
2. location :
location属性は、スレッドの作成時に関連付けられたWorkerLocationオブジェクトを返します。これは、ワーカー スレッドの初期化に使用されるスクリプト リソースの絶対URLを表します。このURLリソースの場所は、ページが複数回リダイレクトされても変わりません。
3. close ：
terminateと同様に、現在のスレッドを閉じます。
4. caches :
現在のコンテキストにはCacheStorageがあり、オフラインでの可用性を確保し、リクエストへの応答をカスタマイズできます。
5. console :
console構文をサポートします。
6. importScripts
importScripts()メソッドを介してurl介してworkerにライブラリ関数をロードできます。
7. XMLHttpRequest
これを使用すると、 Ajaxリクエストを行うことができます。
8. 以下を使用できます。
使用できるAPI多数あるため、ここでは 1 つずつ例を示しません。
worker実行エラーが発生すると、そのonerrorイベント ハンドラーが呼び出されます。 ErrorEventインターフェイスを拡張したerrorという名前のイベントを受け取ります。イベントは泡立ちませんので、キャンセルすることができます。
デフォルトのアクションがトリガーされるのを防ぐために、ワーカーはエラー イベントのPreventDefault() メソッドを呼び出すことができます。
通常、エラー イベントに関しては次の 3 つの重要な情報を使用します。
worker.onerror = function(error) { console.log(error.message); };以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。