JavaScript運行メカニズムの実例分析

本論文の実例はJavaScript動作機構を述べている.皆さんに参考にしてあげます.具体的には以下の通りです.
初めてブログを書きます
現在は第二学期を研究しています.大学二年生は入門の先端を始めましたが、長い間は枠組みの簡単な呼び出しに対して、深く研究していませんでした.このブログは自己監督としての始まりです.このブログの内容は前の時間にWeChatアプリケーションの前端を書いたことに由来しています.ページのレンダリング順序はいつも自分の予想に反しています.ですから、最近JavaScriptの運営メカニズムに関するブログやドキュメントを見ました.
JavaScriptの実行順序
まず、JavaScriptは順序によって実行され、JSはスレッドが一つしかないので、二つのコードを同時に実行することは不可能です.つまり、コードが一つ実行される時、その後ろのコードは全部待ちます.コードが実行されるまで、後のコードが実行されます.このようにすると、ユーザの体験度が非常に悪くなり、例えば一つの要求がサーバに送信されると、後続のコードはサーバが結果を返すまで待ち続け、ユーザが新しい操作を行うことができる.
これはどういうことですか?
JavaScriptの実行メカニズムを詳細に説明する
JavaScript執行スタック
JavaScriptは、スタックの形でコードの実行を行い、実行が開始されるとスタック内が空となり、実行が開始されると、JSエンジンはコードをスタックの底に入れます.このコードが他の関数の呼び出しを含むなら、呼び出された関数をスタックの上に置きます.コードに他の函数の呼び出しが含まれていない場合は、その関数を実行し、実行が完了したらスタックを出します.最終的にはスタックが空になります.
JavaScriptの同期タスクと非同期タスク
実際には、本物のJS内の部分は同期タスクと非同期タスクであるが、これはJS単スレッドの特徴を変えていない.

同期タスク:実行後、直接結果に戻ります.例:consolie.log()c=a+b

非同期タスク:実行後、すぐに結果を返すことができません.一定の時間を待ってから、コールバック関数を実行できます.戻り結果を操作する

.
システムとしては、JSにはメインスレッドがあります.まず同期タスクを実行します.非同期タスクは先に登録されます.その後、メインスレッドは非同期タスクの実行結果の戻りを待たずに、次の同期タスクを実行し続けます.同期タスクが全部実行されるまで、メインスレッドはEvent Queからタスクを読み込み実行します.このプロセスは継続的に循環します.即ちイベント循環イベントループループループです.
事件の循環はどうなっていますか?
おかしいと思わないですか?上述の同期タスクと非同期タスクの実行方式によって、一回で実行できるのではないですか?またどこのEvent Loopですか?
これは小さな詳細です.非同期タスクが複数存在する場合、各非同期タスクが戻ってきた結果に必要な時間は異なります.これはEvent Queが先進的に先に出た形で戻ります.最初の非同期タスクが結果に戻ります.列の先頭に置いて、次の非同期タスクが後続に続き、このように列を作ります.メインラインが空きましたら(同期タスクが実行された後)、イベントをEvent Queから読み出して、メインスレッドに入れて実行します.サイクルは、Event Queが実行された後、しばらく経ってから、また前の非同期タスクが戻ってきました.Event Queにおいて、モニタがEvent Queが非空であることを検出しました.メインスレッドはまたEvent Queのタスクを実行し始めました.
マクロタスクとタスク
定義を説明する前に、まず非同期タスクについて説明します.

は、サーバの非同期要求に対して:最も一般的な非同期タスクであり、これは前後の相互作用に関連し、サーバが要求を処理し、要求結果

に戻る必要がある.

setTimeoutおよびsetInterval:遅延動作、後者はサイクル動作(いずれも遅延値に関連)

である.

Promise:JSが非同期動作を処理するためのオブジェクト

process.nextTick:node.js版のような「setTimeout」は、イベントサイクルの次のサイクルでコールバックバック関数を呼び出します.

広義的にはJSは同期タスクと非同期タスクに分けられ、ここではタスクをより細かい定義を行う.

macro-task(マクロタスク):全体コードscript、setTimeout、setInterval

を含む.

micro-task:Promise,process.nextTick

ここで、マクロタスクとマイクロタスクが提案されたのは、イベントサイクルをよりよく理解するためである.
実行プロセス:

メインスレッドは、最初の循環マクロタスクを順次実行し、最初の循環で遭遇したマイクロタスクをマイクロタスクのEvent Queに入れ、遭遇したマクロタスクをマクロタスクEvent Queに入れます.ここで特に注意してください.初めて循環するマクロタスクは全体的なスクリプトコードです!

その後、マイクロタスクのEvent Queを実行します.

の第二の循環は、マクロタスクのEvent Queから最初のマクロタスクを取り出し、現在のマクロタスクに含まれるコードを実行し、同じように遭遇したマイクロタスクをマイクロタスクのEvent Queに入れ、遭遇したマクロタスクをマクロタスクEvent Queに入れます.

は、現在のマイクロタスクのEvent Queでのタスクを再実行します.

第3のループは、マクロタスクのEvent Queから第2のマクロタスクを取り出します.
簡単に言えば、マクロタスクを実行してから、マイクロタスクを実行することです.

第1回循環のマクロタスクは、全体的なscriptコード

である.

マクロタスクキューは、1回の循環で1つのマクロタスクを実行する

である.
ここで例を見ます.

 console.log('1');
 
 setTimeout(function() {
  console.log('2');
  process.nextTick(function() {
   console.log('3');
  })
  new Promise(function(resolve) {
   console.log('4');
   resolve();
  }).then(function() {
   console.log('5')
  })
 })
 process.nextTick(function() {
  console.log('6');
 })
 new Promise(function(resolve) {
  console.log('7');
  resolve();
 }).then(function() {
  console.log('8')
 })
 
 setTimeout(function() {
  console.log('9');
  process.nextTick(function() {
   console.log('10');
  })
  new Promise(function(resolve) {
   console.log('11');
   resolve();
  }).then(function() {
   console.log('12')
  })
 })
 
 //  ：ssssyoki
 //  ：https://juejin.im/post/59e85eebf265da430d571f89
 //  ：  

出力順序は:
1,7,6,8,2,4,3,5,9,11,10,12
締め括りをつける
このブログには、あなたが聞いたことのない名詞や方法が含まれているかもしれません.詳しく説明していません.なぜかというと、私個人は、いくつかの資料を見る時、よく分からないものに出会って、自分で調べて理解することを選択します.このように記憶と透過的な理解にもっと効果的に使えば、単語を調べるのと同じです.テキストの中で直接教えたら、かえって重視しません.
興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます.http://tools.jb51.net/code/HtmlJsRun上記コードの運転効果をテストします.
もっと多くのJavaScript関連の内容について興味がある読者は、当駅のテーマを見ることができます.「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術まとめ」、「JavaScript事件関連操作と技術大全」、「JavaScript検索アルゴリズム技術まとめ」、「JavaScriptデータ構造とアルゴリズムのまとめ」、「JavaScriptアルゴリズムとテクニックの総括」及び「JavaScriptエラーとデバッグ技術の総括」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.