JavaScript シングルスレッドと非同期の詳細

JavaScript シングルスレッドと非同期の詳細

序文:

JavaScriptsingle threadedasynchronous性質について考えると、多くの学生は「これは矛盾ではないのか?」と疑問に思わずにはいられません。実際、シングルスレッドと非同期は、同時に言語の特性となることはできません。 js はシングルスレッド言語を選択したため、それ自体は非同期にできませんが、js のホスト環境 (ブラウザー、 Nodeなど) はマルチスレッドであり、ホスト環境によって js は何らかの方法で非同期プロパティを持つようになります (イベント駆動型、これについては後述します)。下を見てみると、js のメカニズムがいかにシンプルで効率的であるかが分かります。

ブラウザ:

js はシングルスレッド言語です。ブラウザは js にタスク (関数) を実行するためのメインスレッドを 1 つだけ割り当てますが、一度に実行できるタスクは 1 つだけです。これらのタスクは、実行待ちのタスク キューを形成します。ただし、ネットワーク リクエスト、タイマー、イベント監視など、フロントエンドの一部のタスクは非常に時間がかかります。他のタスクと同様に順番待ちにすると、実行効率が非常に低くなり、ページがフリーズする原因にもなります。そのため、ブラウザは、主に http リクエスト スレッド、ブラウザ タイミング トリガー、ブラウザ イベント トリガー スレッドなど、時間のかかるタスクのために追加のスレッドを開きます。これらのタスクは非同期です。次の図はブラウザのメインスレッドを示しています。

1. タスクキュー

ブラウザはネットワーク リクエストなどの非同期タスク用に別のスレッドを開くと述べましたが、メイン スレッドはこれらの非同期タスクが完了したことをどうやって知るのでしょうか。答えはコールバック関数です。プログラム全体はイベント駆動型であり、各イベントは対応するコールバック関数にバインドされます。たとえば、タイマーを設定するコードがあります。

setTimeout(関数(){
    console.log(タイムアウト);
}, 50);


このコードが実行されると、ブラウザは非同期でタイミング操作を実行します。50ms に達すると、タイミング イベントがトリガーされます。このとき、コールバック関数がタスク キューに配置されます。プログラム全体はこのようなイベントによって推進されます。
したがって、js は常にシングルスレッドであり、ブラウザは非同期を実装するものです。

メインスレッドに戻ります:

js は、タスク キューからタスクを抽出し、メイン スレッドに入れて実行するという 1 つのジョブを実行しています。これをさらに詳しく見てみましょう。

今学んだ概念を図に当てはめてみましょう。上で述べたブラウザが非同期タスク用に別途開くスレッドは、 WebAPIsとして統一的に理解できます。上で述べたタスク キューはcallback queueです。ここで言うメイン スレッドは点線で構成されている部分です。 heapstack一緒になって js メイン スレッドを構成します。関数の実行は、スタックをプッシュおよびポップすることで実現されます。例えば、図には foo() 関数があります。メイン スレッドはこれをスタックにプッシュします。関数本体を実行すると、上記の関数を実行する必要があることがわかったので、これらの関数は再びスタックにプッシュされます。関数が実行されると、関数はスタックからポップされます。スタックが空の場合、タスクが完了したことを意味します。このとき、次のタスクがcallback queueで見つかり、スタックにプッシュされます (この検索プロセスは、タスク キューにタスクがあるかどうかを常にループして確認するため、イベント ループと呼ばれます)。

2. 混乱を招く問題を説明する

1. setTimeout(f1,0)とは何ですか?

このステートメントに関する最大の疑問は、f1 がすぐに実行されるかどうかです。答えは必ずしもそうではありません。次のコードに示すように、メイン スレッド内のコマンドが実行されたかどうかによって決まるためです。

setTimeout(関数(){
コンソールログ(1);
},0);
コンソールログ(2);

2. Ajax リクエストは非同期ですか?

上記の内容を理解すると、 ajaxリクエストは非同期であることがわかります。リクエストが完了すると、リクエスト完了イベントがトリガーされ、コールバック関数がcallback queueに配置されます。メイン スレッドがコールバック関数を実行するときは、シングル スレッドのままです。

3. インターフェースレンダリングスレッドは別のスレッドです

インターフェースレンダリングスレッドは、別途開かれたスレッドです。DOM が変更されるとすぐにインターフェースが再レンダリングされるということですか?

DOM が変更されるとすぐにインターフェイスが再レンダリングされると、効率が必然的に非常に低くなります。そのため、ブラウザのメカニズムでは、インターフェイス レンダリング スレッドとメイン スレッドが相互に排他的であると規定されています。メイン スレッドがタスクを実行する場合、ブラウザ レンダリング スレッドは一時停止状態になります。

3. ブラウザの非同期メカニズムの使い方

js は常に単一のスレッドで実行されており、ブラウザは時間のかかる問題を解決するために、明らかに時間のかかるタスクごとに個別のスレッドを設定していることはすでにわかっています。ただし、これらの明らかに時間のかかる問題に加えて、自分で作成したプログラムにも時間のかかる機能がある場合があります。この状況にどう対処すればよいでしょうか。確かに、自分で別のスレッドを開くことはできませんが、ブラウザによって開かれたウィンドウを使用することはできます。ブラウザ タイマー スレッドとイベント トリガー スレッドは使いやすいですが、ネットワーク リクエスト スレッドは適していません。詳しく見てみましょう:

時間のかかる関数が f1 であり、f1 が f2 の先行タスクであると仮定します。

タイマーを使用してスレッドをトリガーします。

関数 f1(コールバック){
setTimeout(関数(){
    // f1 コードコールバック();
},0);
}
f1(f2);

この書き方は結合度が高いです。

イベントを使用してスレッドをトリガーします。

$f1.on('custom',f2); //ここでバインディングイベントはjQuery関数f1(){として記述されます
setTimeout(関数(){
    // f1 のコード$f1.trigger('custom');
},0);
}


このメソッドは、カスタム イベントをバインドすることでメソッド 1 を分離し、異なるイベントをバインドすることで異なるコールバック関数を実装できるようにします。ただし、このメソッドを適用しすぎると、プログラムが読みにくくなります。

4. 非同期の利点と適切なシナリオ

非同期の利点:

例を使って同期と非同期を比較してみましょう。4 つのタスク (番号 1、2、3、4) が​​あり、その実行時間が 10 ミリ秒であるとします。タスク 2 はタスク 3 の先行タスクであり、タスク 2 には 20 ミリ秒の応答時間が必要です。以下で比較してみましょう。非ブロッキング I/O を実装する方法がわかります。

適しているもの:

プログラムが大量の I/O 操作とユーザー要求を必要とする場合、シングルスレッド、非同期、イベント駆動の特性を備えた言語である js が非常に適していることがわかります。マルチスレッド言語と比較すると、システムオーバーヘッドをあまり消費する必要がなく、マルチスレッド管理の処理にエネルギーを費やす必要もありません。同期実行言語と比較すると、ホスト環境の非同期およびイベント駆動メカニズムにより、非ブロッキング I/O を実現できるため、どのようなシナリオに適しているかを知っておく必要があります。

これで、 JavaScriptシングルスレッドと非同期に関する詳細な記事は終了です。JavaScript JavaScriptシングルスレッドと非同期に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。
  • シングルスレッドJavaScriptにおける非同期処理実装の詳細な説明
  • JSシングルスレッド非同期IOコールバックの特性を分析する
  • JavaScript の 3 つの山: シングル スレッドと非同期

<<:  Nginx 502 Bad Gateway エラーの原因と解決策

>>:  HTML でのアンカーポイントの使用_PowerNode Java アカデミー

推薦する

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

jsは徐々に増加するデジタルアニメーションを実現します

目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...

よくある MySQL テーブル設計エラーの概要

目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...

入力タイプ=ファイルスタイルを定義する方法

ファイルコントロールを美しくする理由は何ですか?他の子供たちはみんなきちんとしたきれいな服を着ている...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...

練習と面接のための Linux シェル スクリプトのヒント 9 つを共有する

予防1) 先頭にインタープリターを追加します: #!/bin/bash 2) 構文のインデントに 4...

AWSサーバーリソースを無料で使用する方法を教えます

AWS - Amazon のクラウド コンピューティング サービス プラットフォーム以前、AWS の...

CSS属性のマージンの理解について話す

1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...

MySQL遅延レプリケーションライブラリ方式の詳細な説明

簡単に言えば、遅延レプリケーションとは、スレーブ データベースがマスター データベースより 1 時間...

Ubuntu に MySQL 5.7 をインストールし、データ ストレージ パスを構成する方法

1. MySQLをインストールするこの記事はAPT経由でインストールされており、インストールされてい...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...

Nest.js 環境変数の設定とシリアル化の詳細な説明

環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...

MySQL データ型 DECIMAL の詳細な分析

序文:金額の保存など、小数点数を保存し、精度要件がある場合、通常は DECIMAL フィールド タイ...