JavaScript マクロタスクとマイクロタスク

JavaScript マクロタスクとマイクロタスク

マクロタスクとマイクロタスク

  • JavaScript はシングルスレッド言語です (マルチスレッドの場合、DOM がおかしくなります)
  • したがって、一度に実行できるのはメイン スレッドと呼ばれる 1 つのタスクのみであり、同期タスクを実行するために使用されます。
  • 非同期タスク、マクロ タスク、マイクロ タスクを保存するための 2 つのタスク リストもあります。
  • 実行順序は、メインスレッド => マイクロタスク => マクロタスクです。

タイマーについて

  1. タイマーモジュールは、時間ポイントに到達するとそれをマクロタスクキューに入れます。
  2. メインスレッドにタスクがない場合、タスクを実行します。タスクがある場合は、実行が完了するまで待機してから続行します。
  3. 同じ時間のタイマーが 2 つある場合、上のタイマーが最初に実行され、下のタイマーが後で実行されます。
  4. 2 つのタイマーの時間が異なる場合は、短いタイマーが最初に実行され、長いタイマーが後で実行されます。

注記:

  • タイマーの⏲はタイマーモジュール内で完了し、完了後は通常の非同期タスクと同じになります。
  • 時間的には、メインスレッドの練習時間が長いため、遅れる場合があります


ここに画像の説明を挿入

約束について

  • promiseのコンストラクタは同期タスクである
  • 実行順序は常に同期 => マイクロタスク => マクロタスクです。
  • ネストされたコードでは、マクロタスク内に同期、マクロタスク、マイクロタスクが存在する場合があります。この場合、それらを次の実行のキュー/メインスレッドに配置して、実行を待機します。
タイムアウトを設定する(() => {
    console.log("タイマー");
    タイムアウトを設定する(() => {
      console.log("タイムアウト タイムアウト");
    }, 0);
    新しいPromise(resolve => {
      console.log("settimeout プロミス");
      解決する();
    }).then(() => {
      console.log("settimeout を実行してください");
    });
  }, 0);
  新しいPromise(resolve => {
    console.log("約束");
    解決する();
  }).then(() => {
    console.log("その後");
  });
  console.log("ssss");

実行順序: Promise=>ssss=>then=>timer=>settimeout Promise=>settimeout then=>timeout timeout

DOMレンダリングタスク

ブラウザレンダリング: CSS + DOM 実行で JS が検出され、JS が最初に実行されます
以下にjsをできるだけ多く配置します。白い画面を避ける

タスク共有メモリ

タスクは同時に実行されず、1 つずつスケジュールされます。タスクはメモリを共有します。

マイクロタスクが複雑なビジネスを処理することを約束

Promise を使用すると、タスクを非同期タスクに変換して、同期タスクの実行に影響を与えないようにすることができます。

JavaScript マクロとマイクロタスクに関するこの記事はこれで終わりです。より関連性の高い JavaScript マクロとマイクロタスクについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript のマクロタスクとマイクロタスクの詳細
  • js のマクロタスクとマイクロタスクについての簡単な説明
  • JavaScript マクロタスクとマイクロタスクの実行順序についての簡単な説明
  • JavaScript イベント ループ マイクロタスクとマクロタスク キューの原理に関する簡単な説明
  • JavaScript イベント ループとマクロタスクおよびマイクロタスクの原則の分析
  • JS イベントループの仕組み イベントループ マクロタスク マイクロタスク 原理分析
  • JavaScript のマイクロタスクとマクロタスクの説明

<<:  Linux における $ 記号の基本的な使い方のまとめ

>>:  Centos7 での mysql 8.0.15 のインストールと設定

推薦する

単一の Nginx IP アドレスに複数の SSL 証明書を設定する例

デフォルトでは、Nginx は IP アドレスごとに 1 つの SSL 証明書のみをサポートします。...

HTMLタグのフルネームと機能の紹介

アルファベット順DTD: このタグが許可される XHTML 1.0 DTD を示します。 S=厳密、...

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

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...

MySQL 制約の超詳細な説明

目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...

Linuxテキスト処理ツールの詳細な説明

1. /etc/passwdファイル内のデフォルトシェルが/sbin/nologinではないユーザー...

珍しいけれど役に立つJSテクニックをいくつか紹介します

序文プログラミング言語には通常、さまざまな隠されたトリックが含まれており、これらのトリックを上手に使...

Linux と最もよく使用されるコマンドの紹介 (習得は簡単ですが、問題の 95% 以上を解決できます)

Linux は現在最も広く使用されているサーバー オペレーティング システムです。Unix をベー...

ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル

環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...

MySQL の JSON 挿入の問題

MySQL 5.7.8 以降では、JSON テキストでデータを効率的に取得できるネイティブ JSON...

hr 水平線スタイルの例コード

コードをコピーコードは次のとおりです。 <hr style="width:490px...

mysql 5.6.23 winx64.zip インストール詳細チュートリアル

WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...

MySQL の count 関数の正しい使い方の詳細な説明

1. 説明MySQLでは、テーブル内の行の総数を取得する必要がある場合、通常は次の文を使用します。 ...

JavaScript カラービューア

この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...