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 のインストールと設定

推薦する

シンプルなCSSアニメーションのtransition属性の詳しい説明

1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...

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

Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...

JavaScript Promise の徹底解説

目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...

Python で pymysql モジュールを使用して MySQL データベースに接続する

pymysqlをインストールするpip install pymysql 2|0pymysqlの使用2...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

Tomcat CentOS インストールプロセス図

Tomcat CentOS インストールこのインストール チュートリアルでは、次の内容について説明し...

シンプルなデータ応答システムを実装する

目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...

js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する

この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...

MySQLデータベースを定期的に自動バックアップする方法

データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...

JavaScript で同時実行制御を実装する方法

目次1. 同時実行制御の概要1.1 フェーズ1 1.2 フェーズ2 1.3 フェーズ3 2. 同時実...

Linux環境変数の設定戦略の詳細な説明

ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定する必要があります。以下...

Vue3 における computed の新しい使用例のまとめ

vue3 での computed の使い方。vue3 は vue2 のオプション API と互換性が...

CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...

MySQLデータ損失のトラブルシューティング事例

目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...