JavaScriptでマルチスレッドを実装する方法

醉折花枝作酒筹
リリース: 2023-01-07 11:44:10
オリジナル
4139 人が閲覧しました

js では Worker クラスを使用してマルチスレッドを実装できます。構文形式は「var worker = new Worker (js file path);」です。このクラスを使用すると、ブラウザから新しいスレッドが適用され、js ファイルを単独で実行するために使用されます。

JavaScriptでマルチスレッドを実装する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JS がシングルスレッド言語であることは誰もが知っていますが、一部の非同期イベントさえも JS のメイン スレッドで実行されます (具体的な実行方法については、私の他のブログの JS コード実行メカニズムを参照してください)。 setTimeout、ajax、または DOM 要素の一部のイベントなどの非同期リクエストは、すべて JS メイン スレッドで実行されます。これらの操作は、実行のためにブラウザーで新しいスレッドを開きませんが、これらの非同期操作が操作されるか、または実行された場合にのみイベント キューに入ります。これはトリガーされ、JS メインスレッドで実行を開始します。

まずブラウザのスレッドについて説明します。ブラウザのメイン スレッドには、UI レンダリング スレッド、JS メイン スレッド、GUI イベント トリガー スレッド、および http リクエスト スレッドが含まれます。

スクリプト言語としての JS の主な目的は、ユーザーと対話し、DOM を操作することです。これにより、シングルスレッドのみが可能であることが決まります。そうでない場合は、非常に複雑な同期の問題が発生します。 (これらの問題についてはここでは検討しません)

しかし、シングルスレッド言語には非常に致命的な確実性があります。スクリプト言語を実行し、特定の関数ブロックの実行に時間がかかると、ブロッキングが発生します。このようなプロジェクトの場合、ユーザー エクスペリエンスは非常に劣るため、プロジェクトの開発プロセス中にこの現象が存在することは許可されません。

実際、JS はこのブロッキング現象を解決するために使用される Worker クラスを提供します。このクラスを使用すると、ブラウザから新しいスレッドに適用されます。このスレッドは、js ファイルを単独で実行するために使用されます。

var worker = new Worker(js文件路径);
ログイン後にコピー

次に、このステートメントは、js ファイルを実行するスレッドに適用されます。

もちろん、メインスレッドには、新しいスレッドを制御してデータを受信するためのメソッドがいくつかあります。ここでは、より一般的に使用されるいくつかの方法についてのみ説明します。

//postMessage(msg);
//postMessage方法把在新线程执行的结果发送到浏览器的js引擎线程里
worker.onmessage = function(){
    //获取在新线程中执行的js文件发送的数据 用event.data接收数据
    console.log( event.data )
};
setTimeout( function(){
    worker.terminate();
    //terminate方法用于关闭worker线程
},2000)

setTimeout( function(){
    worker = new Worker("js/test22.js");
    //再次开启worker线程
},3000)
ログイン後にコピー

新しいスレッドで postMessage() メソッドを使用して、メイン スレッドにデータを送信します。メイン スレッドはワーカーの onmessage イベントを使用してデータを受信するため、マルチスレッド実行とマルチスレッドが実現されます。 js.間のデータの転送。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptでマルチスレッドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート