ホームページ >ウェブフロントエンド >jsチュートリアル >HTML5 WebワーカーによるJavaScriptスレッド

HTML5 WebワーカーによるJavaScriptスレッド

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌オリジナル
2025-03-08 00:51:09202ブラウズ

JavaScript Threading With HTML5 Web Workers

キーポイント

  • postMessage()onmessageJavaScriptは、開発者が別々のスレッドで継続的なプロセスを実行できるため、クライアントのパフォーマンスを大幅に改善できるブラウザの強力な機能です。ただし、ブラウザUIスレッドとは独立して実行され、ページ内のDOM、グローバル変数、JavaScript関数にアクセスできないなど、いくつかの制限があります。
  • 専用のWebワーカーと作成および通信するために、開発者はJavaScriptファイル名をワーカーオブジェクトの新しいインスタンスに渡し、イベントインターフェイスを介してすべての通信を処理します。 Web Scriptは、メソッドを介して単一のデータパラメーターを渡し、
  • イベントハンドラーを介して返品データを受信します。

最新のブラウザはWebワーカーを広くサポートしていますが、インターネットエクスプローラーのバージョンはありません。標準のJavaScriptデータ型、プロセスXMLHTTPREQUEST(AJAX)呼び出し、タイマーの使用、他のワーカーをインポートすることができ、大規模なデータブロック、ゲームAIロジック、レイトレースの分析などの時間のかかるタスクの処理に最適です。

コンバージョン、ネイティブビデオ、セマンティックタグ、その他すべての派手なHTML5機能を備えています。 Webワーカーは、最終的に開発者が別々のスレッドで継続的なプロセスを実行できるようにします。スレッド化は複雑に聞こえ、いくつかの開発言語はそれを注意深くしますが、JavaScriptがうまく実装されており、W3C作業ドラフトが安定していると聞いてうれしいです。 Webワーカーはクライアントのパフォーマンスを大幅に向上させますが、開始する前に、注意すべきことがいくつかあります...

window.locationWeb Workerの制限

Webワーカーは、ブラウザUIスレッドとは独立して実行されるため、JavaScript開発者が馴染み、愛する機能の多くにアクセスできません。主な制限は、WebワーカーがDOMにアクセスできないことです。さらに、ページ内のグローバル変数やJavaScript関数にアクセスすることはできません。最後に、特定のオブジェクトへのアクセスは制限されています。たとえば、

属性は読み取り専用です。ただし、Webワーカーは、標準のJavaScriptデータ型を使用し、XMLHTTPREQUEST(AJAX)の呼び出し、タイマーの使用、さらには他のワーカーを輸入することもできます。大規模なデータブロックの分析、ゲームAIロジック、レイトレースなどの時間のかかるタスクの処理に最適です。

Webワーカーブラウザのサポート 執筆時点で、Firefox、Chrome、Safari、およびOperaのすべてのバージョンは、ある程度Webワーカーをサポートしています。どのブラウザがそれをサポートしていないと思いますか?予想どおり、インターネットエクスプローラーのバージョンはWebワーカーを実装していません。 IE9がサポートを提供していなくても、最終バージョンで実装されることを疑います/願っています。それまでは、3つのオプションがあります。
  • 1年か2年以内にWebワーカーを忘れてください。
  • アプリケーションを受け入れると、IEでクラッシュします。
  • 独自のWebワーカーShimを実装します。これは、タイマーベースの擬似スレッドまたは配列処理に戻ります。これは、すべてのアプリケーションで実行可能または望ましくない場合があります。

Webワーカーとは何ですか?

Webワーカーは、バックグラウンドでロードおよび実行される単一のJavaScriptファイルです。 2つのタイプがあります:

  • 特別労働者:これらの労働者は、作成者(労働者をロードするスクリプト)に関連付けられています。
  • 共有労働者:同じドメイン(Somesite.com)のスクリプトが労働者と通信できるようにします。

今日、私たちは献身的なウェブワーカーについて説明します…

専用のWebワーカー専用のWebワーカーを作成するには、JavaScriptファイル名をワーカーオブジェクトの新しいインスタンスに渡すことができます。

専用のWebワーカーと通信var worker = new Worker("thread1.js"); WebワーカーがDOMにアクセスしたり、ページスクリプトで機能を実行できないため、すべての通信はイベントインターフェイスを介して処理されます。 Webスクリプトは、

メソッドを介して単一のデータパラメーターを渡し、イベントハンドラーを介して返品データを受信します。

Webワーカースクリプトは、独自のイベントハンドラーと

メソッド:thread1.js:postMessage()を介してそれに応じてデータを受信および送信します onmessage

メッセージデータは、文字列、数字、ブール値、配列、オブジェクト、null、または定義されています。データは常に価値で渡され、連続化され、通信中に脱色されます。
var worker = new Worker("thread1.js");

// 接收来自 Web Worker 的消息
worker.onmessage = function(e) {
    alert(e.data);
};

// 发送消息到 Web Worker
worker.postMessage("Jennifer");

onmessageWebワーカーエラーの処理postMessage()

self.onmessage = function(e) {
    self.postMessage("Hello " + e.data);
};
Webワーカーコードが完璧になる可能性は低く、論理エラーはページスクリプトで渡されたデータによって引き起こされる可能性があります。幸いなことに、エラーは

イベントハンドラーを使用してキャッチできます。ハンドラーイベントは、3つの属性を持つオブジェクトを渡します:

:エラーを引き起こしたスクリプトの名前

:エラーが発生した行数 onerror

:誤った説明。
  • filenamepageScript.js:
  • lineno
  • その他のJavaScriptファイルをロードします messageを使用して、1つ以上の追加のJavaScriptライブラリをWebワーカーにロードできます。
または、より多くのWebワーカーをロードすることもできますが、ブラウザがスレッドの野望に追いつくまでシンプルに保つことをお勧めします!

worker.onerror = function(e) {
    alert("Error in file: "+e.filename+"\nline: "+e.lineno+"\nDescription: "+e.message);
};
専用のWebワーカーを停止

メソッドを使用できます。

importScripts()これにより、保留中のタスクが廃棄され、さらなるイベントがキューに入らないようになります。献身的なWebワーカーについて知っておく必要があるのはそれだけです。私の次の投稿では、より複雑な男であるウェブワーカーの共有について説明します!

JavaScript並列処理とHTML5 Webワーカーに関する
importScripts("lib1.js", "lib2.js", "lib3.js");

FAQ(FAQS)(長さが長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここでは省略されています。PAQパーツは必要に応じて再編成および書き直すことができますが、元の意図は変更せずに保つ必要があります。

以上がHTML5 WebワーカーによるJavaScriptスレッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。