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 アカデミー

推薦する

最もよく使用されるJavaScriptイベントについて詳しく学ぶ

目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...

JavaベースのMySQLバックアップテーブル操作

コアはmysqldumpとランタイムです操作は実際にはそれほど難しくありません。バックアップ操作を実...

MySQL 5.7.20 無料インストールバージョンの設定方法グラフィックチュートリアル

インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

MySQL の単一テーブル クエリ操作例の詳細な説明 [構文、制約、グループ化、集計、フィルタリング、並べ替えなど]

この記事では、MySQL の単一テーブル クエリ操作について説明します。ご参考までに、詳細は以下の通...

nginx 用の zabbix 5.0 をインストールして展開する方法

目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...

mysql8でルートユーザーのパスワードをリセットする手順を完了します

序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...

自分のブログを構築しながら学んだこと

<br />ブログを始めて 1 年、私はブログの内外で多くのことを個人的に学びました。ま...

src 属性と href 属性の違い

src と href には違いがあり、混同される可能性があります。 src は現在の要素を置き換える...

Velocity.js はページスクロール切り替え効果を実装します

今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...

MySQL 8.0.18 のインストールと設定のグラフィックチュートリアル

学習目標: Windowsシステムを使用してMySQLデータベースをインストールする方法を学びます。...

JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...

Tencent Cloud Serverの構築方法を説明します(グラフィックチュートリアル)

この記事は元々ブロガーのWeiwei Miaoによって書かれたものです。ブログホームページ: htt...

CSS3 の display:grid、グリッドレイアウトの紹介

1. グリッドレイアウト(グリッド): Web ページをグリッドに分割し、さまざまなグリッドを組み合...