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

推薦する

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...

Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明

目次序文1. 親コンポーネントが子コンポーネントに値を渡す2. サブコンポーネントのprops型制約...

DIVのぼかし機能を実装する方法

マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...

Linux での MySQL 5.7.18 バイナリ パッケージのインストール チュートリアル (デフォルトの構成ファイル my_default.cnf なし)

現在、MySQL を学習中です。私は完全な初心者で、Linux についてはあまり知りません。今後の作...

CentOS7 ファイアウォールとポート関連コマンドの紹介

目次1. ファイアウォールの現在の状態を確認する2. ファイアウォールサービスを開始する3. ファイ...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...

オンラインMySQL自動増分IDが使い果たされた場合の対処方法

目次テーブル定義の自動増分 ID InnoDBシステムはrow_idを自動的に増加させるシドInno...

MySQL NULLがピットを引き起こした

比較演算子でNULLを使用する mysql> 1>NULLを選択します。 +------...

CSS3で実装されたテキストポップアップ効果

成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...

Vueベースのビデオプレーヤーの実装例

既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。ビデ...

MySQLのカバーインデックスに関する知識ポイントのまとめ

インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...

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

この記事では、参考までにMySQL 8.0.15のインストールと設定のグラフィックチュートリアルを紹...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...

Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル

1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...

JavaでTomcatサーバーを起動/停止する方法

1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...