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

推薦する

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ(推奨)

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...

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

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

VMware ESXi CLI の一般的なコマンドを調べる

目次【共通コマンド】 [一般的な esxi コマンドの概要] [esxcli コマンドの調査] ES...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

MySQL ログイン警告問題の解決策

1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...

CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

問題の説明: CSS アニメーション プロパティを使用すると、ループが最初に読み込まれたときに白いギ...

JavaScript におけるシリアル操作と並列操作

目次1. はじめに2. es5メソッド3. 非同期関数のシリアル実行4. 非同期関数の並列実行5. ...

MySQL データベースの最適化: インデックスの実装原則と使用状況の分析

この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...

HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。

ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...

Vueは単純なランダムロールコールを実行します

目次レイアウト部分: <div id="アプリ"> <p>...

proxy_pass を設定した後に Nginx が 404 を返す問題を解決する

目次1. proxy_pass を設定した後に Nginx が 404 を返す問題のトラブルシューテ...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

HTML DOM入門_PowerNode Javaアカデミー

DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...

JavaScript イベント委任 (プロキシ) の使用例の詳細

目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...