資訊專欄INFORMATION COLUMN
摘要：中線程運行機制詳解對于我們都知道，他是個單線程語言，但是準確來說它是擁有一個執(zhí)行程序主線程，和消息隊列輔線程，以及各個真正處理異步操作的工作線程。
JavaScript中線程運行機制詳解
對于JavaScript我們都知道，他是個單線程語言，但是準確來說它是擁有一個執(zhí)行程序主線程，和消息隊列輔線程（Event Loop），以及各個真正處理異步操作的工作線程。
當主線程執(zhí)行JS程序的時候，如果遇到了異步的操作（如：click事件，setTimeOut,I/0操作,異步請求,Promise等）,主線程將各個異步任務交給工作線程，主線程繼續(xù)執(zhí)行，工作線程會判斷是否到了要執(zhí)行該異步操作的條件了，如果工作線程判斷已經(jīng)到了要執(zhí)行工作線程的條件之后，就會把回調(diào)函數(shù)放入輔線程Event Loop的macrotask任務隊列或者microtask任務隊列的隊尾。當上述主線程執(zhí)行完后續(xù)同步調(diào)用的代碼之后，輔線程會一直循環(huán)上面兩個隊列，首先執(zhí)行的是microtask任務隊列，而且該任務隊列是該次循環(huán)就會執(zhí)行完并清空的，macrotask會等到下次event loop循環(huán)的時候執(zhí)行。
Example
1. console.log(1);
2. setTimeout(function timerCallback(){
3. console.log(2);
4. },0)
5. new Promise(function execute(resolve,reject){
6. console.log(3);
7. if(true)
8. resolve();
9. }).then(function resolveCallback(){
10. console.log(4);
11. });
12. console.log(5);
// 上面程序執(zhí)行的順序是：1，3，5，4，2
代碼詳解：當主線程執(zhí)行上述代碼的時候，從上往下執(zhí)行：
1、先將console.log(1)這句代碼做一個入棧執(zhí)行的操作，打印出1，該句代碼沒有后續(xù)的方法調(diào)用了，就出棧銷毀；
2、執(zhí)行setTimeout，將改句代碼入棧執(zhí)行，判斷到該方法屬于WebAPIs（JS工作線程提供API的統(tǒng)稱，其中包含了webcore工作模塊提供了DOM Binding、network、timer等），timerCallback方法出棧，交給工作線程webcore下的timer模塊，這里timer模塊會判斷是否到了執(zhí)行條件了，由于是延時是0，所以timer模塊判斷可以執(zhí)行了，并將回調(diào)函數(shù)timerCallback放到輔助線程Event Loop的macrotask隊尾，等待下一次Event Loop循環(huán)去執(zhí)行。
3、繼續(xù)執(zhí)行Promise這句代碼（包括then語句），將其入棧執(zhí)行，判斷該Promise屬于Promise模塊（非WebAPIs）,將其then的回調(diào)函數(shù)交給Promise模塊，有后續(xù)調(diào)用；將execute方法入棧執(zhí)行，有后續(xù)調(diào)用；將console.log(3)入棧執(zhí)行，打印出3，console.log(3)執(zhí)行完畢，出棧銷毀；有后續(xù)調(diào)用if(true)入棧執(zhí)行，判斷為true，出棧銷毀，繼續(xù)將resolve()入棧執(zhí)行，判斷resolve()是WebAPIs的成功的回調(diào)，執(zhí)行的時候通知到上面的Promise模塊，Promise模塊將成功的回調(diào)放到Event Loop的microtask隊尾，resolve()出棧銷毀，無后續(xù)調(diào)用，Promise出棧銷毀。
4、繼續(xù)執(zhí)行，將console.log(5)入棧執(zhí)行,打印出5，無后續(xù)調(diào)用，出棧銷毀。
5、Event Loop開始循環(huán)microtask隊列，將resolveCallback()入棧執(zhí)行，有后續(xù)調(diào)用；將console.log(4)入棧執(zhí)行，打印出4，出棧銷毀；無后續(xù)調(diào)用，resolveCallback()出棧銷毀，清空隊列。
6、Event Loop開始循環(huán)macrotask隊列，將timerCallback()入棧執(zhí)行，有后續(xù)調(diào)用；將console.log(2)入棧執(zhí)行，打印出2，出棧銷毀，無后續(xù)調(diào)用；將timerCallback()出棧銷毀，清空隊列。
備注：macrotask任務隊列的來源有：
setTimeout
setInterval
setImmediate
I/O
UI rendering
microtask任務隊列的來源有：
process.nextTick
promises
Object.observe
MutationObserver
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84305.html
摘要：從異步過程的角度看，函數(shù)就是異步過程的發(fā)起函數(shù)，事件監(jiān)聽函數(shù)就是異步過程的回調(diào)函數(shù)。事件觸發(fā)時，表示異步任務完成，會將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊列中，等待主線程執(zhí)行。 1.為什么JavaScript是單線程？ JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。JavaScrip...
摘要：主線程在任務隊列中讀取事件，這個過程是循環(huán)不斷地，所以這種運行機制叫做事件循環(huán)是在執(zhí)行棧同步代碼結(jié)束之后，下一次任務隊列執(zhí)行之前。 單線程 javascript為什么是單線程語言，原因在于如果是多線程，當一個線程對DOM節(jié)點做添加內(nèi)容操作的時候，另一個線程要刪除這個DOM節(jié)點，這個時候，瀏覽器應該怎么選擇，這就造成了混亂，為了解決這類問題，在一開始的時候，javascript就采用單線...
摘要：機制詳解與中實踐應用歸納于筆者的現(xiàn)代開發(fā)語法基礎(chǔ)與實踐技巧系列文章。事件循環(huán)機制詳解與實踐應用是典型的單線程單并發(fā)語言，即表示在同一時間片內(nèi)其只能執(zhí)行單個任務或者部分代碼片。 JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用歸納于筆者的現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與實踐技巧系列文章。本文依次介紹了函數(shù)調(diào)用棧、MacroTask 與 Micr...
摘要：上代碼代碼可以看出，不僅函數(shù)比指定的回調(diào)函數(shù)先執(zhí)行，而且函數(shù)也比先執(zhí)行。這是因為后一個事件進入的時候，事件環(huán)可能處于不同的階段導致結(jié)果的不確定。這是因為因為執(zhí)行完后，程序設(shè)定了和，因此階段不會被阻塞進而進入階段先執(zhí)行，后進入階段執(zhí)行。 JavaScript（簡稱JS）是前端的首要研究語言，要想真正理解JavaScript就繞不開他的運行機制--Event Loop（事件環(huán)） JS是一門...
摘要：主線程從任務隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為事件循環(huán)。上面也提到，在到達指定時間時，定時器就會將相應回調(diào)函數(shù)插入任務隊列尾部。這就是定時器功能。關(guān)于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
閱讀 743·2021-10-09 09:44
閱讀 2016·2021-09-22 15:54
閱讀 5056·2021-09-22 10:55
閱讀 1442·2019-08-29 18:41
閱讀 777·2019-08-29 11:24
閱讀 2104·2019-08-28 18:20
閱讀 1030·2019-08-26 11:51
閱讀 3049·2019-08-26 11:00
