JavaScriptとイベントキュー!

だからJavaScriptの定義を知っている、それは単一のスレッド同期言語です.
これは、1つの呼び出しスタックと1つのメモリヒープを持ち、次のコードを実行し、次のコードを実行する前にコードを実行しなければなりません.
JavaScriptが同期し、シングルスレッドされているので、ページ上のコードのJavaScriptブロックを実行すると、同じページに他のJavaScriptコードが並列実行されません!
私たちはすべてのJSを使用して非同期のものを使用しているので、定義は不合理なようですか?
私がこの話題に関して読んだいろいろな資源から、私が理解するものは、ここにあります:
JavaScript自体は同期していますが、ブラウザは非同期の方法でコード化することができます.
答えは以下の通りです.

by using the Browser APIs, such as Fetch API, setTimeout, Promises, Geolocation API etc ..

非同期関数が呼ばれるときはいつでも、それはブラウザAPIに送られます.
呼び出しスタックから受け取ったコマンドに基づいて、APIは独自のシングルスレッド操作を開始します.
この例はsettimeoutメソッドです.
SetTimeout操作が呼び出しスタックで処理されるとき、それは処理のためにこの操作を送り返すために指定された時間まで待つ対応するAPIに送られます.
どこで操作を送りますか.イベントキュー.
イベントループは、呼び出しスタックが空であるかどうかを常にチェックします.空であれば、イベントキューから新しい関数が追加されます.
だから、イベントキュー自体に深く飛び込むことができます.
これを理解するためには、まずいくつかの用語について話をする必要があります.

• Tasks : any block of code (literally)
• Browser APIs : APIs that usually start their own threads to run code parallelly ( most of them requires a callback which will later on be pushed to the event queue )
• Micro Tasks : any callback related to a promise
• rendering process : anything related to rendering such as style calculation, or any requestAnimationFrame callback
• call stack : a mechanism for an interpreter to keep track of its place in a script that calls multiple functions ( what function is currently being run and what function initially called it ).
• Heap : an area of pre-reserved computer main storage ( memory ) that a program process can use to store data
• Thread : a sequence of programmed instructions that can be managed independently by a scheduler it got its own heap and stack.

それはすべての意味を作るために適切な時間!
そこで、メインスレッドはJavaScriptを同期的に実行します.このコマンドがスタック内で実行されたときに、ある特定のBrowserAPIを使用すると、新しいスレッドが起動され、独立してコードを実行します

SetTimeoutを例にとってみましょう.新しいスレッドはX MSが実行されるまでsytickを追跡し続けるでしょう、新しいスレッドはメッセージをキューにイベントキューにenqueueにプッシュ( push )します.
その計画は完全に説明している.
注意するのが重要であることは、すべてのコールバックが同じ優先順位と実行またはenqueueingの同じ順序を得たということです.
JSCONFプレゼンテーションで見たおかしい表現は、次のようにイベントループを説明します.

while(true){
   var Queue = getNextQueue();
   var Task = queue.pop();
   Execute(task);

   while(microtaskQueue.hasTasks){
      doMicrotask();
   }

   if(isRepaintTime()){
      animationTasks = animationQueue.copyTasks();
      for ( task in animationTasks)
         doAnimationTask(task);
      repaint();
   }
}

多くの情報源がそれらについて説明しているように、マイクロタスクは通常、コールバックを約束します.イベントキューにプッシュするとき、タスク全体をプッシュするとき、タスクをプッシュするときには、タスクキューのコールバックで最初にプッシュするだけです.
また、レンダリング時にイベントキューにキュー全体をプッシュ(通常、ブラウザは通常、16 Hz/17 msごとに画面を再描画します.
したがって、より良い周波数においてそれを再描画するために無意味なので、人間の目が毎秒30と60フレーム(30/60 Hz)の間で見ることができるので、それは、単純なタスクまたはマイクロタスクでそれを実行するのではなく、アニメーションを実行するためにRequestanimationFrameを使用することです.
JSNFの別のプレゼンテーションでは、次のようにイベントループを可視化します

結論として

The event loop is the secret behind JavaScript's asynchronous programming. JavaScript executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading, so describing JavaScript as asynchronous is arguably misleading.

私は、これがいずれにしろ意味をなされることを望みます、もしも、私が見てこれらのプレゼンテーションをチェックするのを非常に推薦しないならば、私はあなたがよりよくそれを理解する保証をします:

ご意見のセクションで自分の方法でそれを説明したり、主題についてのより多くのリンクを提供するために自由に感じてください.
読書ありがとう.