序文: ブラウザ: 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 アカデミー
Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...
目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...
目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...
ファイルコントロールを美しくする理由は何ですか?他の子供たちはみんなきちんとしたきれいな服を着ている...
目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...
予防1) 先頭にインタープリターを追加します: #!/bin/bash 2) 構文のインデントに 4...
AWS - Amazon のクラウド コンピューティング サービス プラットフォーム以前、AWS の...
1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...
簡単に言えば、遅延レプリケーションとは、スレーブ データベースがマスター データベースより 1 時間...
1. MySQLをインストールするこの記事はAPT経由でインストールされており、インストールされてい...
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...
コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...
環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...
序文:金額の保存など、小数点数を保存し、精度要件がある場合、通常は DECIMAL フィールド タイ...