VUE3.0をすばやく開始する方法：
jsの頻繁なテストポイントである、実行コンテキスト、実行スタック、および実行メカニズム（同期タスク、マイクロタスク、マクロタスク、イベントループ）について
一部の友人は、あなたが尋ねられたときに混乱していると感じるかもしれませんので、私はそれが画面の前であなたに役立つことを望んで、今日それを要約します。
js jsメカニズムについては、スレッドとプロセスについて話しましょ
CPU线程
と进程CPUですか？
进程线程用語では、线程线程进程に基づいて実行されます。
单线程と呼ばれる进程には1つの実行フローがあります。
进程の複数の実行ストリームは多线程と呼ばれます。つまり、さまざまなタスクを実行するためにプログラムで複数の異なる线程同時に実行できます。つまり、単一のプログラムは複数の並列実行线程を作成してそれぞれのタスクを完了することが許可されます。 。
著者は、 qq音乐を聴くと、 qq音乐qq音乐聴くことができます曲はスレッドであり、ダウンロードはスレッドです。 vscode再度開いてコードを書き込むと、別のプロセスになります。
プロセスは互いに独立していますが、一部のリソースは同じプロセスの下でスレッド間で共有されます。
スレッドのライフサイクルは、5つの段階を通過します。
新しい状態： newキーワードとThreadクラスまたはそのサブクラスを使用してスレッドオブジェクトを作成した後、スレッドオブジェクトは新しい状態にあります。プログラムがスレッドをstart()まで、この状態のままです。
READY状態：スレッドオブジェクトがstart()メソッドを呼び出すと、スレッドは準備完了状態になります。準備ができた状態のスレッドは準備が整ったキューにあり、 CPU使用する権利を取得する限り、すぐに実行できます。
実行状態：Ready StateのスレッドがCPUリソースを取得した場合、 run()を実行でき、スレッドは実行状態にあります。実行状態のスレッドは最も複雑で、ブロックされ、準備ができていて、死んでしまう可能性があります。
ブロッキング状態：スレッドがsleep（睡眠）実行し、 suspend（挂起） 、 wait(等待) 、その他の方法を実行した場合、占有されたリソースを失った後、スレッドは実行状態からブロッキング状態に入ります。睡眠時間が切れた後、またはデバイスのリソースが得られた後、準備ができた状態を再入力できます。 3つのタイプに分けることができます。
待機ブロック：実行状態のスレッドはwait()メソッドを実行し、スレッドが待機ブロッキング状態に入ります。
同期ブロッキング：スレッドは、 synchronized同期ロックを取得できません（同期ロックは他のスレッドで占められているため）。
その他のブロッキング：スレッドのsleep()またはjoin()を呼び出すことによりI/O要求が発行されると、スレッドはブロッキング状態に入ります。 sleep() Stateがタイムアウトすると、 join()スレッドが終了するか、タイムアウトが終了するか、 I/O処理が完了するか、スレッドが完了し、スレッドがReady状態に戻ります。
死の状態：実行中のスレッドがタスクを完了するか、その他の終了条件が発生すると、スレッドは終了状態に切り替わります。
JS
ブラウザのスクリプト言語として、 JSは主にユーザーと対話してDOM操作するために使用されます。これにより、シングルスレッドのみができると判断され、そうでなければ非常に複雑な同期の問題を引き起こします。たとえば、 JavaScript同時に2つDOMスレッドがあるとします。
とJSスタック
（実行コンテキスト（ ECと呼ばれる）」または実行環境とも呼ばれます。
javascriptには、次の3つの実行コンテキストタイプがあります
。 javascriptスクリプトは、実行スタックの下部を破壊しません。グローバルコンテキストは、グローバルオブジェクト（ブラウザ環境を例にとって、このグローバルオブジェクトがwindowです）を生成し、 this値をこのグローバルオブジェクトに結合します。
関数の実行コンテキスト関数が呼び出されるたびに、新しい関数実行コンテキストが作成されます（関数が繰り返し呼ばれるかどうかに関係なく）。
eval関数実行コンテキストeval関数内で実行されるコードには、独自の実行コンテキストもありますが、 eval頻繁に使用されないため、ここでは分析されません。
先ほど、 js実行中に実行コンテキストを作成するが、実行コンテキストを保存する必要があるため、保存するために何が使用されるかを述べました。スタックデータ構造を使用する必要があります。
スタックは、最後まで初めてのデータ構造です。
そのため、要約すると、コードが実行されているときに作成された実行コンテキストを保存するために使用される実行コンテキストは、実行スタックです。
JSコードを実行すると
JSエンジンは、グローバルな実行コンテキストを作成push 、このプロセスでは、 JSエンジンがこのコードのすべての変数を割り当てます（未定義） JSエンジンは実行されます。このプロセスでは、 JSエンジンはラインごとに実行されます。つまり、メモリを1つずつ割り当てます（実際の値）。
このコードにfunction呼び出しがある場合、 JSエンジンは関数実行コンテキストを作成し、作成スタックと実行プロセスpushグローバル実行コンテキストと同じです。
実行スタックが完了すると、実行コンテキストがスタックからポップされ、次の実行コンテキストが入力されます。
以下の例を示しましょう。プログラムに次のコードがあります
。
function first（）{
console.log（ "first function"）;
2番目（）;
console.log（ "繰り返し最初の関数"）;
}
function second（）{
console.log（ "2番目の関数"）;
}
初め（）;
push
（
"
グローバル実行コンテキストエンド"）
上記の例を簡単に分析します。
、およびGlobal Execution Context start
、 firstメソッドを実行し、関数実行コンテキストを作成し、実行スタックにpush
first実行コンテキストを実行し、 first functionの出力を実行し
secondメソッドを実行します。 、関数の実行コンテキストを作成しpush
second実行コンテキストを実行し、2番目のsecond function
first secondし、スタックからポップし、次の実行コンテキストを入力し
first実行、出力Again first function
firstされ、スタックからポップされ、次の実行コンテキストグローバル実行コンテキスト
グローバル実行コンテキストの継続的な実行と出力Global Execution Context end
画像を使用して要約します
大丈夫。
実行のコンテキストと実行スタックについて話した後jsの実行メカニズムについて話してみましょ
js js
jsタスクは同期タスクと非同期タスクに分けられます。
同期タスクは、メインスレッドで実行されるためにキューに掲載されたタスクを指します。
非同期タスクは、メインスレッドに入るが「タスクキュー」を入力するタスクを指します（タスクキューのタスクは、メインスレッドがアイドル状態である場合にのみ実行されます）。メインスレッド、非同期タスクを実行すると、タスクは実行のためにメインスレッドを入力します。キューストレージであるため、ファーストインフストアウトルールを満たしています。一般的な非同期タスクには、 setInterval 、 setTimeout 、 promise.thenなどが含まれます。
以前に同期タスクと非同期タスクを導入しました。
同期タスクと非同期タスクは、それぞれ異なる「場所」を入力し、以前のタスクが完了した場合にのみ、次のタスクを実行できます。非同期タスクはメインスレッドに入るのではなく、 Event Tableと登録関数を入力します。
指定されたものが完了すると、 Event Tableこの関数をEvent Queueに移動します。 Event Queueはキューデータ構造であるため、ファーストインフストアウトルールを満たしています。
メインスレッドのタスクが実行後に空になると、対応する関数はEvent Queueから読み取り、メインスレッドで実行されます。
上記のプロセスは継続的に繰り返され、これはしばしばイベントループと呼ばれます。
写真で要約しましょう
機能Test1（）の
例を簡単に紹介させてください
{
console.log（ "log1"）;
setTimeout(() => {
console.log（ "Setimeout 1000"）;
}, 1000);
setTimeout(() => {
console.log（ "setimeout100"）;
}, 100);
console.log（ "log2"）;
}
test1（）; // log1、setimeout100、setimeout 1000 非同期
log1、log2の前に実行されることを知っています。
したがって、 100ミリ秒の遅延setTimeout 100を実行するコールバック機能
1000 setTimeout 1000
上記の例を実行します上記の著者が言及した同期と非同期のタスクを理解している限り、次に、別の例を挙げましょう。出力がどうなるか見てみましょう。
関数test2（）{
console.log（ "log1"）;
setTimeout(() => {
console.log（ "Setimeout 1000"）;
}, 1000);
setTimeout(() => {
console.log（ "setimeout100"）;
}, 100);
新しい約束（（解決、拒否）=> {
console.log（ "New Promise"）;
解決する（）;
}).then(() => {
console.log（ "promise.then"）;
});
console.log（ "log2"）;
}
test2（）;上記の問題を解決するには、同期タスクとマクロタスクも知る必要があります。
JSのjs 2つのタイプに分割されます。1つはマクロタスクMacroTaskと呼ばれ、もう1つはマイクロタスクMicroTaskと呼ばれます。
MicroTask
MacroTask
には
メインコードブロック
setimeout（）
setimmediate
（） - node
requestanimationframe（） - ブラウザが
あり
ます
上記のマクロタスクとマイクロタスクとマイクロタスクは何ですか？
まず、全体的なscript （最初のマクロタスクとして）が実行され始めると、すべてのコードが同期タスクと非同期タスクの2つの部分に分割されます。非同期タスクは非同期キューに入り、マクロタスクとマイクロタスクに分割されます。
マクロタスクはEvent Tableに入り、指定されたイベントが完了するたびに、このEvent Table Event Queue
イベントEvent Tableに移動し、登録します指定されたイベントが完了するたびに、このEvent TableがメインスレッドのEvent Queueに移動し
、マイクロタスクのEvent Queueが確認されます、すべてではない場合、次のマクロタスクを実行します
。
非同期のマクロタスクとマイクロタスクの上記の例を理解した後、答えを簡単に得ることができます。
JSでは、同期タスクが非同期タスクの前に最初に実行されるため、上記の例は最初にlog1、new promise、log2出力します。
promise.then
同期
されていることに注意してください
、もう1つのマクロタスクが実行され、 100ミリ秒のコールバック関数を遅らせると、実行と出力のsetTimeout 100優先されます
。このマクロタスクはマイクロタスクを生成しないため、次のマクロタスクを実行するために
実行する必要はありません
1000の遅延がある機能は、実行と出力のsetTimeout 1000
その
ため、Test2メソッドが実行された後、 log1、new promise、log2、promise.then、setTimeout 100、setTimeout 1000が順番になります
マクロタスク、次にマイクロタスク、またはマクロタスクの前にマイクロタスクで
js最初に実行するかどうかについてのさまざまな意見。著者の理解は、jsコードブロック全体がマクロタスクと見なされる場合、js実行順序は最初にマクロタスクで、次にマイクロタスクであるということです。
sayingは、100回の練習よりも優れていjs 。
例1
関数test3（）{
console.log（1）;
setimeout（function（）{
コンソール.ログ(2);
新しい約束（function（resolve）{
console.log（3）;
解決する（）;
}）then（function（）{
console.log（4）;
});
console.log（5）;
}, 1000);
新しい約束（function（resolve）{
console.log（6）;
解決する（）;
}）then（function（）{
console.log（7）;
setimeout（function（）{
console.log（8）;
});
});
setimeout（function（）{
console.log（9）;
新しい約束（function（resolve）{
console.log（10）;
解決する（）;
}）then（function（）{
console.log（11）;
});
}, 100);
console.log（12）;
}
test3（）; 1、6、12 js
それを分析しましょう。
全体的なコードブロックマクロタスクが実行された後、1つのマイクロタスクと2つのマクロタスクが生成されるため、マクロタスクのキューには2つのマクロタスクがあり、マイクロタスクキューには1つのマイクロタスクがあります。
マクロタスクが実行された後、このマクロタスクによって生成されたすべてのマイクロタスクが実行されます。マイクロタスクは1つしかないため、 7出力されます。このマイクロタスクは別のマクロタスクを生み出したため、現在、マクロタスクキューには3つのマクロタスクがあります。
3つのマクロタスクのうち、遅延セットが最初に実行されるため、このマクロタスクはマイクロタスクを生成しないため、実行するマイクロタスク8ありません。
マクロタスクの実行を100ミリ秒、出力9、10 、およびマイクロタスクを生成するため、
マクロタスクが実行された後、マクロタスクによって生成されたすべてのマイクロタスクが実行されます
タスクキュー出力のすべてのマイクロタスク11
マクロタスクの実行は、 1000ミリ2、3、5の出力であり、マイクロタスクがマクロタスクを
実行した後に
マクロタスクはすべて実行されます。そのため、 4タスクのすべてのマイクロタスクが実行され、
1、6、12、7、8、9、10、11、2、3、5、4のコードの例が出力されます。 、2、3、5、4
例2：
上記の例1をわずかに変更し、 asyncを紹介しawait
Async関数test4（）を待ちます{{
console.log（1）;
setimeout（function（）{
コンソール.ログ(2);
新しい約束（function（resolve）{
console.log（3）;
解決する（）;
}）then（function（）{
console.log（4）;
});
console.log（5）;
}, 1000);
新しい約束（function（resolve）{
console.log（6）;
解決する（）;
}）then（function（）{
console.log（7）;
setimeout（function（）{
console.log（8）;
});
});
const result = async1（）;
console.log(結果);
setimeout（function（）{
console.log（9）;
新しい約束（function（resolve）{
console.log（10）;
解決する（）;
}）then（function（）{
console.log（11）;
});
}, 100);
console.log（12）;
}
async関数async1（）{
console.log（13）
Return Promise.Resolve（ "Promise.Resolve"）;
}
test4（）;上記の例は何ですか？ここでは、 asyncの問題を簡単に解決し、 awaitいます。
ここでは、 async Promise await実際には砂糖でPromise.then awaitを知っています。したがって、上記の例を次のコード
関数test4（）として理解できます{
console.log（1）;
setimeout（function（）{
コンソール.ログ(2);
新しい約束（function（resolve）{
console.log（3）;
解決する（）;
}）then（function（）{
console.log（4）;
});
console.log（5）;
}, 1000);
新しい約束（function（resolve）{
console.log（6）;
解決する（）;
}）then（function（）{
console.log（7）;
setimeout（function（）{
console.log（8）;
});
});
新しい約束（function（resolve）{
console.log（13）;
Return Resolve（ "Promise.Resolve"）;
}）。then（（result）=> {
console.log(結果);
setimeout（function（）{
console.log（9）;
新しい約束（function（resolve）{
console.log（10）;
解決する（）;
}）then（function（）{
console.log（11）;
});
}, 100);
console.log（12）;
});
}
test4（）;上記のコードを見た後、簡単に結果を得ることができますか？
まず、 jsコードブロック全体がマクロタスクとして最初に実行され、順番に1、6、13出力されます。
全体的なコードブロックマクロタスクが実行された後、2つのマイクロタスクと1つのマクロタスクが生成されるため、マクロタスクのキューには1つのマクロタスクがあり、マイクロタスクのキューには2つのマイクロタスクがあります。
マクロタスクが実行された後、このマクロタスクによって生成されたすべてのマイクロタスクが実行されます。したがって、 7、Promise.resolve、12出力されます。このマイクロタスクはさらに2つのマクロタスクを生み出したため、Macrotaskキューには現在3つのマクロタスクがあります。
3つのマクロタスクのうち、遅延セットが最初に実行されるため、このマクロタスクはマイクロタスクを生成しないため、実行するマイクロタスク8ありません。
マクロタスクの実行を100ミリ秒、出力9、10 、およびマイクロタスクを生成するため、
マクロタスクが実行された後、マクロタスクによって生成されたすべてのマイクロタスクが実行されます
タスクキュー出力のすべてのマイクロタスク11
マクロタスクの実行は、 1000ミリ2、3、5の出力であり、マイクロタスクがマクロタスクを
実行した後に
生成されたすべてのマイクロタスクは、マイクロタスクキューと出力4のすべてのマイクロタスクを実行します
1、6、13、7、Promise.resolve、12、8、9、10、11、2、3、5、4 、あなたたちはそれを正しくやったのですか？
多くの友人はまだsetTimeout(fn)理解していません。
setTimeout(fn) setTimeout(fn,0)として理解できます。これは実際に同じことを意味します。
JSは同期タスクと非同期タスクに分割されているsetTimeout(fn)がわかっています。アイドル。
著者は再びそれを言及します、あなたは私たちがsetTimeout後に設定した遅延時間、 jsの遅延時間に応じて間違いなく実行されると思いますか？私たちが設定する時間は、コールバック関数を実行できることですが、メインスレッドが別の問題を示すことができます。
関数test5（）{
setimeout（function（）{
console.log（ "setimeout"）;
}, 100);
i = 0とします。
while (true) {
i++;
}
}
Test5（）;上記の例は、 100ミリ秒後にsetTimeoutされますか？
GUI渲染ここでそれを理解していないかもしれません。
JS引擎线程とGUI渲染线程相互に排他的であるため、宏任务とDOM任务整然と進行できるようにするため、ブラウザは1つの宏任务の実行結果と前にGUI渲染线程開始します。次の宏任务の実行。
したがって、マクロタスク、マイクロタスク、およびGUIレンダリングの関係は次のとおりです。
マクロタスク - >マイクロタスク - > GUIレンダリング - >マクロタスク - > ...
[関連ビデオチュートリアルの推奨：Webフロントエンド]
上記は上記ですJavaScriptの詳細な分析実行コンテキストと実行メカニズムの詳細については、詳細については、PHP Chinese Webサイトの他の関連記事に注意してください。
