序文: ブラウザ: js はシングルスレッド言語です。ブラウザは js にタスク (関数) を実行するためのメインスレッドを 1 つだけ割り当てますが、一度に実行できるタスクは 1 つだけです。これらのタスクは、実行待ちのタスク キューを形成します。ただし、ネットワーク リクエスト、タイマー、イベント監視など、フロントエンドの一部のタスクは非常に時間がかかります。他のタスクと同様に順番待ちにすると、実行効率が非常に低くなり、ページがフリーズする原因にもなります。そのため、ブラウザは、主に http リクエスト スレッド、ブラウザ タイミング トリガー、ブラウザ イベント トリガー スレッドなど、時間のかかるタスクのために追加のスレッドを開きます。これらのタスクは非同期です。次の図はブラウザのメインスレッドを示しています。 1. タスクキューブラウザはネットワーク リクエストなどの非同期タスク用に別のスレッドを開くと述べましたが、メイン スレッドはこれらの非同期タスクが完了したことをどうやって知るのでしょうか。答えはコールバック関数です。プログラム全体はイベント駆動型であり、各イベントは対応するコールバック関数にバインドされます。たとえば、タイマーを設定するコードがあります。 setTimeout(関数(){ console.log(タイムアウト); }, 50); このコードが実行されると、ブラウザは非同期でタイミング操作を実行します。50ms に達すると、タイミング イベントがトリガーされます。このとき、コールバック関数がタスク キューに配置されます。プログラム全体はこのようなイベントによって推進されます。 メインスレッドに戻ります: js は、タスク キューからタスクを抽出し、メイン スレッドに入れて実行するという 1 つのジョブを実行しています。これをさらに詳しく見てみましょう。 今学んだ概念を図に当てはめてみましょう。上で述べたブラウザが非同期タスク用に別途開くスレッドは、 2. 混乱を招く問題を説明する1. setTimeout(f1,0)とは何ですか?このステートメントに関する最大の疑問は、f1 がすぐに実行されるかどうかです。答えは必ずしもそうではありません。次のコードに示すように、メイン スレッド内のコマンドが実行されたかどうかによって決まるためです。 setTimeout(関数(){ コンソールログ(1); },0); コンソールログ(2); 2. Ajax リクエストは非同期ですか?上記の内容を理解すると、 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 を実現できるため、どのようなシナリオに適しているかを知っておく必要があります。 これで、 以下もご興味があるかもしれません:
|
<<: Nginx 502 Bad Gateway エラーの原因と解決策
>>: HTML でのアンカーポイントの使用_PowerNode Java アカデミー
目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...
リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...
コアはmysqldumpとランタイムです操作は実際にはそれほど難しくありません。バックアップ操作を実...
インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...
1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...
この記事では、MySQL の単一テーブル クエリ操作について説明します。ご参考までに、詳細は以下の通...
目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...
序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...
<br />ブログを始めて 1 年、私はブログの内外で多くのことを個人的に学びました。ま...
src と href には違いがあり、混同される可能性があります。 src は現在の要素を置き換える...
今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...
学習目標: Windowsシステムを使用してMySQLデータベースをインストールする方法を学びます。...
目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...
この記事は元々ブロガーのWeiwei Miaoによって書かれたものです。ブログホームページ: htt...
1. グリッドレイアウト(グリッド): Web ページをグリッドに分割し、さまざまなグリッドを組み合...