JSコア知識点整理——非同期、単スレッド、運行メカニズム

ことばを引く
javasciptを勉強している時、よく人からjavasciptは非同期で、またシングルスレッドだと言われました.一体何が非同期で、何がシングルスレッドですか?javascriptのブラウザでの運行メカニズムはどうなりますか?何がeventloopで、task queueですか?異歩関数はどう書きますか?この文章を読んで、上の問題に対して全面的な認識があると信じています.
ブラウザを全面的に理解する
ブラウザには多くのプロセスがあります.

Browserプロセス:ブラウザのメインプロセス(協調、マスター)は一つだけです.

サードパーティ・プラグインプロセス:各タイプのプラグインはプロセスに対応しており、このプラグインを使用する場合のみ作成

GPUプロセス:最大1つ、3 D描画などに使用する

ブラウザレンダリングプロセス(ブラウザカーネル)(Rendererプロセス、内部はマルチスレッド)

ブラウザのレンダリングプロセスには多くのスレッドがあります.

レンダリングエンジンスレッド:文字通り、ページのレンダリングを担当するスレッド

JSエンジンスレッド:JSの解析と実行を担当する( )

タイミングフリップフロップスレッド:setTimeout、set Interval

などのタイミングイベントを処理する.

イベントトリガスレッド:DOMイベントの処理

非同期http要求スレッド:http要求処理

JavaScript ( JS )， 。 I/O 、 （click, keydown...） 。 ， dom ， シングルスレッド
判断基準
前はバカだったが、単スレッドのマルチスレッドが分かりませんでした.同期しました.実は簡単です
非同期の判断基準:ブロック、同期ブロック、非同期ブロック.
単スレッドの判定基準:一回に一つだけのことをするかどうか.
JSエンジンは一回に一つだけのことをします.非同期タスクに遭遇したら、後の同期タスクはブロックされません.だからJSは非同期の単スレッドだと言います.注意したいのはJS ， ( Node.js)。while閉塞実験

var start = new Date();
    while(new Date() - start < 100000) { // delay 10 sec
        ;
    }

上のコードはchromeコンソールに入力され、現在のページのjsメインスレッド10 sを手動でブロックすることができます.その後、現在のページにconsolie.logs(1)を入力しても、現在のページは反応せず、別のページにconsone.logs(1)を入力して直接説明 ， 1 2 実行メカニズム
JS Engineとruntime Evironment
前にStocoverflowで一つの答えを見ましたが、確かな感じがします.
JavaScript Engine:parse your code and convert it to runnable comands
JavaScript Runtime Evironment:provide some object to javascript so that it can interact with the out side world.
For example、the Chrome Browser and node.js use the same Egine-V 8、but their Runtimes are different:in Chrome you have the window、DOM object etc、while node gives you require、Bures and process.
簡単に言えば、上の図は左にJSエンジンと見られます.右にJS運行環境と見られます.
Eventloop
前にも話しましたが、JSは設計の初めにシングルスレッドを選択しました.
しかし、シングルスレッドには問題があります.一部のタスクは、例えば、Ajaxがデータを要求します.同期に設計されたら、後のタスクはAjaxの要求が完了するまで待っています.この性能は受け入れられません.
したがって、ブラウザカーネル(? ， )は、タスクを同期タスクと非同期タスクに分け、すべての同期タスクをメインスレッド上に実行し、実行スタック(execution context stack)を形成する.従って、非同期タスクは他の非同期スレッド上に置いて実行される.
非同期タスクが完了すると、関連するコールバック関数がメッセージキューに入れられます. ， ， ， Eventloop個人的な理解:JSエンジンは同期しています.ブラウザはeventloopという仕組みで非同期を実現しました.
How JavaScript worksはどうやってこの過程を説明しますか?
So,for example,when your JavaScript program makes an Ajax request to fetch some data from the server,you set up the「reponse」code in a function(the「calback」),and the JS Entine Telstre the hoenment.
「Hey、I’m going tosuspendexecution for now、but whenever you finish with that network request、and you have some data、please call this function back.」The browseris then set up tolistenfor the reponse from the network、and when it has something to return to you、it will schedule the callback function to be executed by inserting it into the event loop.
マクロタスク、マイクロタスク、練習
面接はマクロタスク、マイクロタスクが好きです.じゃ、私達はmacrotaskとmicrotaskとは何ですか?
マクロタスクはまたtaskになります. task、task 1->レンダリング->task 1
microtaskは、 task実行終了直後に実行されるタスクであることが分かりますので、microtaskは帰属性があり、対応するtaskのみ実行後に実行されます.task 1->microtask 1->レンダリング->task 2->microtask 2->レンダリング....
macrotask:メインコードブロック、setTimeout、set Intervalなど(イベントキューの中のイベントはすべてmacrotaskであることが分かります.)
microtask:Promise、process.nextTickなど
次のコードの結果を求めます.

console.log('1');
setTimeout(function() { //  2
    new Promise(function(resolve) {
        console.log('2');
        resolve();
    }).then(function() {
        console.log('3')
    })
    console.log('4');
},2000)
new Promise(function(resolve) {
    console.log('5');
    resolve();
}).then(function() {
    console.log('6')
})

setTimeout(function() {  //  1
    new Promise(function(resolve) {
        console.log('7');
        resolve();
    }).then(function() {
        console.log('8')
    })
      setTimeout(function(){ //  3
        console.log('9')
    },2000)
},1000)

//(156) (78) (243) (9)

解析:task 1: 1 5-->microtask 1 6--(実行スタック空)－>レンダー-->eventloop1 calback queueに追加 1eventloopに捕獲され、同期タスクがスタックに入り、非同期タスクがsettiomeoutに与えられます.(実行スタック空)－>レンダー-->eventloop 7calback queueに加入 8eventloopに捕獲され、同期タスク入スタックtask 3:2 -->microtask 3 2(実行スタック空)-->render-->eventloop 2 4calback queueに加入 3eventloopに捕獲され、同期タスクはスタックtask 4に入る.
非同期プログラミング
コールバック関数の実装

let fs = require('fs');
fs.readFile('./1.js','utf-8',(err,data)=>{
    //
    fs.readFile('./2.js','utf-8',(err,data)=>{
         //
         fs.readFile('./3.js','utf-8',(err,data)=>{
                //
         })
    })
})

欠点は、地獄に戻りやすく、リセットできないことです.
プロミス

const fs = require('fs');
const readFile(i) = new Promise(function(){
     fs.readFile(`./${i}.js`,'utf-8',(err,data)=>{
            resolve(data)
         })
})
    readFile(1)
   .then(readFile(2))
   .then(readFile(3))
   .....

async await

async function read(){
 //await       promise,
 let a = await readFile('./1.txt');
 console.log(a);
 let b = await readFile('./2.txt');
 console.log(b);
 let c = await readFile('./3.txt');
 console.log(c);
 return 'end';
 }

終わりに
以上は私が複数の文章を読んだ後、自分の理解を結び付けて、javascriptの非同期スレッドと運行メカニズムをまとめました.どの部分に問題があるかを感じたら、コメントエリアにコメントしてください.
参照
ブラウザのマルチプロセスからJSシングルスレッドまで、JS運行メカニズムの最も全面的な整理JavaScript運行メカニズムの詳細解:Event LoopJavaScript非同期メカニズムについて説明します.JavaScript運行原理解析What is the difference between JavaScript Engine and JavaScript Runtime Enmentと巡回イベントを同時に解決します.