當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript等待异步线程完成_作为前端你了解JavaScript运行机制吗？

發布時間：2024/4/13 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript等待异步线程完成_作为前端你了解JavaScript运行机制吗？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作為前端工程師，大家都知道js是前端一開始就要學會的知識點，js的代碼你會寫了，那js的運行機制你了解嗎？只有了解了js的運行機制，才能在工作中如魚得水，今天就跟隨珠峰的老師一起來了解下js的運行機制吧。

JavaScript單線程模型

JavaScript是單線程的，JavaScript只在一個線程上運行，但是瀏覽器是多線程的，典型的瀏覽器有如下線程：

JavaScript引擎線程
GUI渲染線程
瀏覽器事件觸發線程
瀏覽器Http請求線程

JavaScript為什么是單線程的

JavaScript之所以采用單線程而不是多線程，由于作為瀏覽器腳本語言，主要用途是與用戶互動，以及操作DOM(文檔對象模型)和BOM(瀏覽器對象模型)，而多線程需要共享資源，多線程編程經?常面臨鎖、狀態同步等問題。
假定JavaScript同時有兩個線程，這兩個線程同時操作同一個DOM增刪修改操作，這時瀏覽器應該以哪個線程操作為準？無疑會帶來同步問題。
既然JavaScript是單線程的，這就意味著，一次只能運行一個任務，其他任務都必須在后面排隊等待。

為了利用多核CPU的計算能力，HTML5提出了Web Worker，它會在當 ? 前JavaScript的執行主線程中利用Worker類新開辟一個額外的線程來加載和運行特定的JavaScript文件，但在HTML5 Web Worker中是不能操作DOM的，任何需要操作DOM的任務都需要委托給JavaScript主線程來執行，所以雖然引入HTML5 Web Worker，但仍然沒有改變JavaScript單線程的本質。

任務列表

Javascript有一個main thread 主進程和call-stack(一個調用堆棧)，在對一個調用堆棧中的task處理的時候，其他的都要等著。當在執行過程中遇到一些類似于setTimeout等異步操作的時候，會交給瀏覽器的其他模塊(以webkit為例，是webcore模塊)進行處理，當到達setTimeout指定的延時執行的時間之后，task(回調函數)會放入到任務隊列之中。

一般不同的異步任務的回調函數會放入不同的任務隊列之中。等到調用棧中所有task執行完畢之后，接著去執行任務隊列之中的task(回調函數)。

異步和同步

一般而言，操作分為：發出調用和得到結果兩步。

同步：

同步是指，發出調用，但無法立即得到結果，需要一直等待，直到返回結果。同步任務會進入主線程, 主線程后面任務必須要等當前任務執行完才能執行，從而導致主線程阻塞。

異步：

異步是指，調用之后，不能直接拿到結果，通過event loop事件處理機制，在Event Queue注冊回調函數最終拿到結果(拿到結果中間的時間可以介入其他任務)。

JavaScript是如何工作的，首先理解幾個概念

JS Engine(JS引擎)
Runtime(運行上下文)
Call Stack(調用棧)
Event Loop(事件循環)
Callback(回調)

JS Engine

JavaScript引擎就是用來執行JS代碼的, 通過編譯器將代碼編譯成可執行的機器碼讓計算機去執行(Java中的JVM虛擬機一樣)。

常見的JavaScript虛擬機(一般也把虛擬機稱為引擎)：

Chakra(Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)

目前比較流行的就是V8引擎，Chrome瀏覽器和Node.js采用的引擎就是V8引擎。
引擎主要由堆(Memory Heap)和棧(Call Stack)組成

Heap(堆) - JS引擎中給對象分配的內存空間是放在堆中的
Stack(棧)- 這里存儲著JavaScript正在執行的任務。每個任務被稱為幀(stack of frames)。

主線程運行的時候，產生堆(heap)和棧(stack),棧中的代碼調用個各種外部api。

RunTime (運行環境)

JS在瀏覽器環境中運行時，BOM和DOM對象提供了很多相關外部接口(這些接口不是V8引擎提供的)，供JS運行時調用，以及JS的事件循環(Event Loop)和事件隊列(Callback Queue)，把這些稱為RunTime。在Node.js中，可以把Node的各種庫提供的API稱為RunTime

Call Stack

當JavaScript代碼執行的時候，創建執行環境是很重要的，它可能是下面三種情況中的一種：

全局 code(Global code)——代碼第一次執行的默認環境
函數 code(Function code)——執行流進入函數體
Eval code(Eval code)——代碼在eval函數內部執行

JavaScript代碼首次被載入時，會創建一個全局上下文，當調用一個函數時，會創建一個函數執行上下文。

在計算機系統中棧是一種遵從先進后出(FILO)原則的區域。函數被調用時，創建一個新的執行環境，就會被加入到執行棧頂部，瀏覽器始終執行當前在棧頂部的執行環境。一旦函數完成了當前的執行環境，它就會被彈出棧的頂部, 把控制權返回給當前執行環境的下個執行環境。

案例：瀏覽器第一次加載你的script，它默認的進了全局執行環境，然后main執行創建一個新的執行環境，把它添加到已經存在的執行棧的頂部，在里面執行Student構造函數，執行流進入內部函數將生成執行環境添加到當前棧頂，在Student構造函數里，又調用sayHi方法，再次把sayHi生成執行環境壓入到棧頂。當函數執行完一次彈出棧頂。

class?Student?{constructor(age,?name)?{this.name?=?name;this.age?=?age;this.sayName();?//?stack?3
????}
????sayName()?{console.log(`my?name?is?${this.name},?this?year?age?is?${this.age}`);
????}
}function?main(age,?name)?{new?Student(age,?name);?//?stack?2
}
main(23,?'John');?//?stack?1

程序運行時，首先main()函數的執行上下文入棧，再調用Student構造函數添加到當前棧尾，在Student里再調用sayName()方法，添加到此時棧尾。最終main方法所在的位置叫棧底，sayName方法所在的位置是棧頂，層層調用，直至整個調用棧完成返回結果，最后再由棧頂依次出棧。

Event Loop & Callback

Event Loop 類似于一個while(true)的循環，每執行一次循環體的過程我們成為Tick。每個Tick的過程就是查看是否有事件待處理，當Call Stack里面的調用棧運行完變成空了，就取出事件及其相關的回調函數。放到調用棧中并執行它。

調用棧中遇到DOM操作、ajax請求以及setTimeout等WebAPIs的時候就會交給瀏覽器內核的其他模塊進行處理，webkit內核在Javasctipt執行引擎之外，有一個重要的模塊是webcore模塊。對于圖中WebAPIs提到的三種API，webcore分別提供了DOM Binding、network、timer模塊來處理底層實現。

等到這些模塊處理完這些操作的時候將回調函數放入任務隊列中，之后等棧中的task執行完之后再去執行任務隊列之中的回調函數。

一般不同的異步任務的回調函數會放入不同的任務隊列之中。等到調用棧中所有task執行完畢之后，接著去執行任務隊列之中的task(回調函數)。

代碼案例：console.log('Hi');
setTimeout(function?cb1()?{console.log('cb1');
},?5000);console.log('Bye');

以上代碼從上到下首先執行log('Hi') 它是一個普通方法立即被執行，當遇到定時器的時候，執行引擎將其添加到調用棧，調用棧發現setTimeout是WebAPIs中的API，將其出棧交給瀏覽器的timer模塊進行處理，此時timer模塊去處理延遲執行的函數，此時執行log('Bye'),輸出'Bye'，當timer模塊中延時方法規定的時間到了之后就將其放入到任務隊列之中，此時調用棧中的task已經全部執行完畢。

調用棧中的task執行完畢之后，執行引擎會接著看執行任務隊列中是否有需要執行的回調函數。

Event Loop處理機制

什么是Event Loop？

Event Loop(事件循環)是實現異步的一種機制，允許 Node.js 執行非阻塞 I/O 操作。

大多數現代的系統內核都是多線程的, 他們在后臺可以處理多個同時執行的操作. 當其中一個操作完成時, 系統內核會通知Node.js, 然后與之相關的回調函數會被加入到 poll隊列并且最終被執行。

注意: 在Windows和Unix/Linux實現之間存在一點小小的差異, 但對本示例來說這并不重要，最重要的部分都已列在這里了，實際上有7或8個階段, 但我們關心的和Node.js實際會用到的階段都已經列在了上面。

每個階段都有一個先進先出(FIFO)的隊列，里面存放著要執行的回調函數，然而每個階段都有其特殊之處，當事件循環進入了某個階段后，它可以執行該階段特有的任意操作，然后進行該階段的任務隊列中的回調函數，一直到隊列為空或已執行回調的數量達到了允許的最大值，當隊列為空或已執行回調的數量達到了允許的最大值時，事件循環會進入下一個階段,階段之間會互相轉換，循環順序并不是完全固定的，因為很多階段是由外部的事件觸發的。

階段概覽

timers(定時器)：此階段執行由setTimeout()和setInterval() 調度的回調函數
I/O callbacks(I/O回調): 此階段會執行幾乎所有的回調函數, 除了 close callbacks(關閉回調) 和那些由 timers 與 setImmediate() 調度的回調.
idle(空閑)，prepare(預備): 此階段只在內部調用
poll(輪詢): 檢索新的I/O事件，在恰當的時候會阻塞在這個階段
check(檢查): setImmediate() 設置的回調會在此階段被調用
close callbacks(關閉事件的回調): 諸如 socket.on('close', ...) 此類的回調在此階段被調用

在事件循環的每次運行之間，Node.js會檢查它是否在等待異步I/O或定時器, 如果沒有的話就會自動關閉。

一次事件循環就是處理以上幾個phase的過程，此外還有兩個比較特殊的隊列Next Ticks Queue和Other Microtasks Queue，那另外兩個特殊的隊列是在什么時候運行的呢？
答案: 就是在每個 phase運行完后馬上就檢查這兩個隊列有無數據，有的話就馬上執行這兩個隊列中的數據直至隊列為空。當這兩個隊列都為空時，event loop 就會接著執行下一個phase。
這兩個隊列相比，Next Ticks Queue的權限要比Other Microtasks Queue的權限要高，因此Next Ticks Queue會先執行。

兩個比較特殊的隊列：

Next Ticks Queue: 保存process.nextTick中的回調函數
Other Microtasks Queue: 保存promise等microtask中的回調函數。

階段詳情

由于這些操作中的任意一個都可以調度更多的操作, 在 poll(輪詢) 階段處理的新事件被系統內核加入隊列, 當輪詢事件正在被處理時新的輪詢事件也可以被加入隊列. 因此, 長時間運行的回調函數可以讓 poll 階段運行的時間比 timer(計時器) 的閾值長得多。看下面timer 和 poll 部分了解更多細節。

timers

給一個定時器(setTimeout/setInterval)指定時間閾值時，給定的回調函數有時并不是在精確的時間閾值點執行，定時器的閾值只是說至少在這個時間閾值點執行，然而操作系統調度或其他回調的執行可能會延遲定時器回調的執行。

注意：從技術來講， poll階段會控制定時器何時被執行

const?fs?=?require('fs');//?設定一個100ms執行的定時器const?startTime?=?Date.now();
setTimeout(()?=>?{console.log('timeout延遲執行時間',?Date.now()?-?startTime);console.log('timer');
},?100);//?異步讀取文件?假設95ms完成讀取任務
fs.readFile('./1.txt',?(err,?data)?=>?{?//?回調函數中又耗費100毫秒const?startTime?=?Date.now();while?(Date.now()?-?startTime?200)?{
????????//?console.log(Date.now()?-?startTime);
????}
});

開始事件循環定時器被加入到timer中延遲執行，當事件循環進入poll階段，它有一個隊列執行I/O操作(fs.readFile())還未完成，poll階段將會阻塞，大約95ms 完成了I/O操作(文件讀取)，將要耗時10ms才能完成的回調加入poll隊列并執行，當回調執行完成，poll Queue為空，此時poll會去timer階段查看最近有沒有到期的定時器，發現存在一個已經超時將近195ms的定時器，并執行定時器回調。在這個例子中如果不假設讀取時間，定時器執行的時間間隔大約為200ms。

注意: 為了防止 poll 階段阻塞事件循環, libuv(一個實現了Node.js事件循環和Node.js平臺所有異步行為的C語言庫), 有一個嚴格的最大限制(這個值取決于操作系統), 在超過此限制后就會停止輪詢.

I/O callbacks

此階段執行一些系統操作處理 I/O 異常錯誤；,如TCP的errors回調函數。

poll

poll 階段主要有兩個功能:

1.執行時間閾值已過去的定時器回調

2.處理poll隊列中的事件

當事件循環進入poll階段并且當前沒有定時器時，以下兩種情況其中一種會發生：

如果poll隊列不是空的，事件循環會遍歷隊列并同步執行里面的回調函數，直到隊列為空或者到達操作系統的限制(操作系統規定的連續調用回調函數的數量的最大值)
如果poll隊列是空的，則以下兩種情況其中一種將發生：
- 如果存在被 setImmediate() 調度的回調，事件循環會結束poll階段并進入check階段執行那些被 setImmediate() 調度了的回調。
- 如果沒有任何被 setImmediate() 調度的回調，事件循環會等待回調函數被加入隊列，一旦回調函數加入了隊列，就立即執行它們。

一旦poll隊列變為空，事件循環就檢查是否已經存在超時的定時器，如果存在，事件循環將繞回到timers階段執行這些定時器回調。

check

此階段如果poll階段變為空轉(idle)狀態，如果存在被 setImmediate() 調度的回調，事件循環不會在poll階段阻塞等待相應的I/O事件，而直接去check階段執行 setImmediate() 函數。

close callbacks

如果一個socket或句柄被突然關閉(例如 socket.destroy()), 'close'事件會在此階段被觸發. 否則 'close'事件會通過 process.nextTick() 被觸發.

setImmediate() vs setTimeout()

setImmediate() 被設計為: 一旦當前的poll階段完成就執行回調
setTimeout() 調度一個回調在時間閥值之后被執行

這兩種定時器的執行順序可能會變化, 這取決于他們是在哪個上下文中被調用的. 如果兩種定時器都是從主模塊內被調用的, 那么回調執行的時機就受進程性能的約束(進程也會受到系統中正在運行的其他應用程序的影響).

setTimeout(function?timeout()?{console.log('timeout');
},?0);
setImmediate(function?immediate()?{console.log('immediate');
});

但如果把setImmediate和setTimeout放到了I/O周期中，此時他們的執行順序永遠都是immediate在前，timeout在后。

const?fs?=?require('fs');
fs.readFile(__filename,?()?=>?{
??setTimeout(()?=>?{console.log('timeout');
??},?0);
??setImmediate(()?=>?{console.log('immediate');
??});
});

相比于 setTimeout(), 使用 setImmediate() 的主要優點在于: 只要時在I/O周期內, 不管已經存在多少個定時器, setImmediate()設置的回調總是在定時器回調之前執行。

process.nextTick()

在上面我們提到了Next Ticks Queue特殊的隊列，在這個隊列里主要存放process.nextTick這個異步函數。從技術上講該階段并不屬于事件循環的一部分，不管當前事件循環處于哪個階段，只要當前階段操作完畢后進入下個階段前瞬間執行process.nextTick()。

這樣一來任何時候在給定階段調用process.nextTick()時，所有傳入process.nextTick()的回調都會在事件循環繼續之前被執行。由于允許開發者通過遞歸調用 process.nextTick() 來阻塞I/O操作, 這也使事件循環無法到達 poll 階段.

利用process.nextTick函數，我們可以對內部函數作異步處理可能出現的異常，porcess.nextTick(callback, ...args) 允許接收多個參數，callback后面的參數會作為callback的實參傳遞進來，這樣就無需嵌套函數了。

function?apiCall(arg,?callback)?{if?(typeof?arg?!==?'string')return?process.nextTick(callback,new?TypeError('argument?should?be?string'));
????callback.call(this,?arg);
};
apiCall(1,?(err)?=>?{console.log(err);
});
apiCall('node',?(err)?=>?{console.log(err);
});

setTimeout() setImmediate() process.nextTick()

setTimeout() 在某個時間值過后盡快執行回調函數；
process.nextTick() 在當前調用棧結束后就立即處理，這時也必然是“事件循環繼續進行之前”
setImmediate() 函數是在poll階段完成后進去check階段時執行

優先級順序從高到低： process.nextTick() > setImmediate() > setTimeout()注：這里只是多數情況下，即輪詢階段(I/O 回調中)。比如之前比較 setImmediate() 和 setTimeout() 的時候就區分了所處階段/上下文。

Macrotask Queue和Microtask Queue

macrotask 和 microtask 這兩個概念, 表示異步任務的兩種分類。在掛起任務時，JS 引擎會將所有任務按照類別分到這兩個隊列中，首先在 macrotask 的隊列(這個隊列也被叫做 task queue)中取出第一個任務，執行完畢后取出 microtask 隊列中的所有任務順序執行；之后再取 macrotask 任務，周而復始，直至兩個隊列的任務都取完。

macrotask(宏任務、大任務):

script(整體代碼)
setTimeout
setInterval
setImmediate
I/O
UI rendering

microtask(微任務、小任務):

promise
Object.observe
process.nextTick
MutationObserver

每個事件循環只處理一個macrotask(大任務) ，但會處理完所有microtask(小任務)。

參考資料

JS運行機制
Node.JS事件循環
Javascript事件循環機制
事件循環

珠峰前端課程開課時間

2019年2月11日?《零基礎入門課程》?2019年2月11日?《全日制框架課程》

2019年2月11日?《周末班框架課程》?

2019年2月11日?《前端就業課程》

2019年2月13日?《前端架構課程》

總結

以上是生活随笔為你收集整理的javascript等待异步线程完成_作为前端你了解JavaScript运行机制吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python办公代码_[Python]
下一篇： sketchup作品_18级园林工程技术