Javascript系列之javascript機制

參考連接：
這一次，完全弄懂 JavaScript 執行機制
從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

JavaScript運行

JavaScript引擎是單線程運行的,瀏覽器不管在何時都只且只有一個線程在運行JavaScript程序.瀏覽器的內核是多線程的，它們在內核制控下相互配合以保持同步，一個瀏覽器至少實現三個常駐線程：javascript引擎線程，GUI渲染線程，瀏覽器事件觸發線程。這些異步線程都會產生不一樣的異步的事件.

1. javascript引擎是基於事件驅動單線程執行的，JS引擎一直等待着任務隊列中任務的到來，而後加以處理，瀏覽器不管何時都只有一個JS線程在運行JS程序。
2. GUI渲染線程負責渲染瀏覽器界面，當界面須要重繪（Repaint）或因爲某種操做引起迴流(reflow)時,該線程就會執行。但須要注意 GUI渲染線程與JS引擎是互斥的，當JS引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JS引擎空閒時當即被執行。
3. 事件觸發線程，當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來自瀏覽器內核的其餘線程如鼠標點擊、AJAX異步請求等，但因爲JS的單線程關係全部這些事件都得排隊等待JS引擎處理。（當線程中沒有執行任何同步代碼的前提下才會執行異步代碼）

JavaScript運行機制

程序中跑兩個線程，一個負責程序自己的運行，做爲主線程 main thread； 另外一個負責主線程與其餘線程的的通訊，被稱爲「Event Loop 線程" 。每當遇到異步任務，交給 EventLoop 線程，而後本身日後運行，等到主線程運行完後，再去 EventLoop 線程拿結果。

1）全部任務都在主線程上執行，造成一個執行棧（execution context stack）。

2）主線程以外，還存在一個"任務隊列"（task queue）。系統把異步任務放到"任務隊列"之中，而後繼續執行後續的任務。

3）一旦"執行棧"中的全部任務執行完畢，系統就會讀取"任務隊列"。若是這個時候，異步任務已經結束了等待狀態，就會從"任務隊列"進入執行棧，恢復執行。

4）主線程不斷重複上面的第三步。

"回調函數"（callback），就是那些會被主線程掛起來的代碼。異步任務必須指定回調函數，當異步任務從"任務隊列"回到執行棧，回調函數就會執行。"任務隊列"是一個先進先出的數據結構，排在前面的事件，優先返回主線程。主線程的讀取過程基本上是自動的，只要執行棧一清空，"任務隊列"上第一位的事件就自動返回主線程。

Event Loop（事件循環)

主線程從"任務隊列"中讀取事件，這個過程是循環不斷的，因此整個的這種運行機制又稱爲Event Loop。
Event Loop 是一個很重要的概念，指的是計算機系統的一種運行機制。JavaScript語言就採用這種機制，來解決單線程運行帶來的一些問題。

javascript是單線程的，這個線程中擁有惟一的一個事件循環。
JavaScript代碼的執行過程當中，除了依靠函數調用棧來搞定函數的執行順序外，還依靠任務隊列(task queue)來搞定另一些代碼的執行。
一個線程中，事件循環是惟一的，可是任務隊列能夠擁有多個。

異步任務：macrotask與microtask

運行機制以下：

• 執行一個宏任務（棧中沒有就從事件隊列中獲取）
• 執行過程當中若是遇到微任務，就將它添加到微任務的任務隊列中
• 宏任務執行完畢後，當即執行當前微任務隊列中的全部微任務（依次執行）

Tasks, microtasks, queues and schedules

異步setTimeout & setInterval

概念

setTimeout：在指定的毫秒數後，將定時任務處理的函數添加到執行隊列的隊尾。
setInterval：按照指定的週期(以毫秒數計時)，將定時任務處理函數添加到執行隊列的隊尾。

從主線程的角度看，一個異步過程包括下面兩個要素：

• 發起函數(或叫註冊函數)A
• 回調函數callbackFn

它們都是在主線程上調用的，其中註冊函數用來發起異步過程，回調函數用來處理結果。

例如setTimeout(fn, 1000)，其中的setTimeout就是異步過程的發起函數，fn是回調函數。用一句話歸納：工做線程將消息放到消息隊列，主線程經過事件循環過程去取消息。

• 消息隊列：消息隊列是一個先進先出的隊列，它裏面存放着各類消息。
• 事件循環：事件循環是指主線程重複從消息隊列中取消息、執行的過程。