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

推薦する

mysqldumpデータエクスポートの問題に関する詳細な議論

1. mysqldump の使用時にエラー (1064) が報告されます。これは、mysqldump...

CSS 等高レイアウトの一般的な方法

等高レイアウト同じ親コンテナー内の同じ高さの子要素のレイアウトを指します。等高レイアウトの実装の観点...

有名なウェブサイトのロゴに使われている25種類のフォントのコレクション

この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...

MySQLの3値ロジックとNULLの詳細な説明

目次NULLとは何か2種類のNULLなぜ「= NULL」ではなく「IS NULL」と書く必要があるの...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

MySQL パーティション テーブルの基本入門チュートリアル

序文最近のプロジェクトでは、大量のデータを保存する必要があり、このデータには有効期限があります。クエ...

Nginx 最適化サービスで Web ページ圧縮を実装する方法

リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...

JavaScript の BigIn 関数の共通プロパティをまとめます

目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...

Matlab による JavaScript プログラミング、重心アルゴリズムによる位置決め学習

目次Matlab セントロイドアルゴリズムMatlab はクローズドな商用ソフトウェアであり、米国政...

Linux lsof コマンドの使用方法の詳細な説明

lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...

uniapp vue および nvue カルーセル コンポーネントのサンプル コード

vueの部分は以下のとおりです。 <テンプレート> <ビュークラス="&...