javascript
【朴灵评注】JavaScript 运行机制详解：再谈Event Loop
二、任務隊列
單線程就意味著，所有任務需要排隊，前一個任務結束，才會執(zhí)行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。 如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因為IO設備（輸入輸出設備）很慢（比如Ajax操作從網(wǎng)絡讀取數(shù)據(jù)），不得不等著結果出來，再往下執(zhí)行。 JavaScript語言的設計者意識到，這時CPU完全可以不管IO設備，掛起處于等待中的任務，先運行排在后面的任務。等到IO設備返回了結果，再回過頭，把掛起的任務繼續(xù)執(zhí)行下去。 【這個跟Brendan Eich沒半毛錢關系。進程在處理IO操作的時候，操作系統(tǒng)多半自動將CPU切給其他進程用了】 于是，JavaScript就有了兩種執(zhí)行方式：一種是CPU按順序執(zhí)行，前一個任務結束，再執(zhí)行下一個任務，這叫做同步執(zhí)行；另一種是CPU跳過等待時間長的任務，先處理后面的任務，這叫做異步執(zhí)行。程序員自主選擇，采用哪種執(zhí)行方式。 【純粹扯蛋。】 【給CPU啥指令它就執(zhí)行啥，哪有什么CPU跳過等待時間長的任務。】 【歸根結底，阮老師沒有懂什么叫異步。】 具體來說，異步執(zhí)行的運行機制如下。（同步執(zhí)行也是如此，因為它可以被視為沒有異步任務的異步執(zhí)行。） 【上面這句話表現(xiàn)出不僅不懂什么是異步，更不懂什么是同步。】（1）所有任務都在主線程上執(zhí)行，形成一個執(zhí)行棧（execution context stack）。
（2）主線程之外，還存在一個"任務隊列"（task queue）。系統(tǒng)把異步任務放到"任務隊列"之中，然后繼續(xù)執(zhí)行后續(xù)的任務。
（3）一旦"執(zhí)行棧"中的所有任務執(zhí)行完畢，系統(tǒng)就會讀取"任務隊列"。如果這個時候，異步任務已經(jīng)結束了等待狀態(tài)，就會從"任務隊列"進入執(zhí)行棧，恢復執(zhí)行。
（4）主線程不斷重復上面的第三步。
?
【上面這段初步地在說event loop。但是異步跟event loop其實沒有關系。準確的講，event loop是實現(xiàn)異步的一種機制】 【一般而言，操作分為：發(fā)出調(diào)用和得到結果兩步。發(fā)出調(diào)用，立即得到結果是為同步。發(fā)出調(diào)用，但無法立即得到結果，需要額外的操作才能得到預期的結果是為異步。同步就是調(diào)用之后一直等待，直到返回結果。異步則是調(diào)用之后，不能直接拿到結果，通過一系列的手段才最終拿到結果（調(diào)用之后，拿到結果中間的時間可以介入其他任務）。】 【上面提到的一系列的手段其實就是實現(xiàn)異步的方法，其中就包括event loop。以及輪詢、事件等。】 【所謂輪詢：就是你在收銀臺付錢之后，坐到位置上不停的問服務員你的菜做好了沒。】 【所謂（事件）：就是你在收銀臺付錢之后，你不用不停的問，飯菜做好了服務員會自己告訴你。】 下圖就是主線程和任務隊列的示意圖。?
只要主線程空了，就會去讀取"任務隊列"，這就是JavaScript的運行機制。這個過程會不斷重復。
【JavaScript運行環(huán)境的運行機制，不是JavaScript的運行機制。】三、事件和回調(diào)函數(shù)
"任務隊列"實質(zhì)上是一個事件的隊列（也可以理解成消息的隊列），IO設備完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務可以進入"執(zhí)行棧"了。主線程讀取"任務隊列"，就是讀取里面有哪些事件。 【任務隊列既不是事件的隊列，也不是消息的隊列。】 【任務隊列就是你在主線程上的一切調(diào)用。】 【所謂的事件驅動，就是將一切抽象為事件。IO操作完成是一個事件，用戶點擊一次鼠標是事件，Ajax完成了是一個事件，一個圖片加載完成是一個事件】 【一個任務不一定產(chǎn)生事件，比如獲取當前時間。】 【當產(chǎn)生事件后，這個事件會被放進隊列中，等待被處理】"任務隊列"中的事件，除了IO設備的事件以外，還包括一些用戶產(chǎn)生的事件（比如鼠標點擊、頁面滾動等等）。只要指定過回調(diào)函數(shù)，這些事件發(fā)生時就會進入"任務隊列"，等待主線程讀取。
所謂"回調(diào)函數(shù)"（callback），就是那些會被主線程掛起來的代碼。異步任務必須指定回調(diào)函數(shù)，當異步任務從"任務隊列"回到執(zhí)行棧，回調(diào)函數(shù)就會執(zhí)行。 【他們壓根就沒有被執(zhí)行過，何來掛起之說？】 【異步任務不一定要回調(diào)函數(shù)。】 【從來就沒有什么執(zhí)行棧。主線程永遠在執(zhí)行中。主線程會不斷檢查事件隊列】 "任務隊列"是一個先進先出的數(shù)據(jù)結構，排在前面的事件，優(yōu)先返回主線程。主線程的讀取過程基本上是自動的，只要執(zhí)行棧一清空，"任務隊列"上第一位的事件就自動返回主線程。但是，由于存在后文提到的"定時器"功能，主線程要檢查一下執(zhí)行時間，某些事件必須要在規(guī)定的時間返回主線程。 【先產(chǎn)生的事件，先被處理。永遠在主線程上，沒有返回主線程之說】 【某些事件也不是必須要在規(guī)定的時間執(zhí)行，有時候沒辦法在規(guī)定的時間執(zhí)行】四、Event Loop
主線程從"任務隊列"中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為Event Loop（事件循環(huán)）。 【事件驅動的的實現(xiàn)過程主要靠事件循環(huán)完成。進程啟動后就進入主循環(huán)。主循環(huán)的過程就是不停的從事件隊列里讀取事件。如果事件有關聯(lián)的handle(也就是注冊的callback)，就執(zhí)行handle。一個事件并不一定有callback】為了更好地理解Event Loop，請看下圖（轉引自Philip Roberts的演講《Help, I'm stuck in an event-loop》）。
?
【所以上面的callback queue，其實是event queue】上圖中，主線程運行的時候，產(chǎn)生堆（heap）和棧（stack），棧中的代碼調(diào)用各種外部API，它們在"任務隊列"中加入各種事件（click，load，done）。只要棧中的代碼執(zhí)行完畢，主線程就會去讀取"任務隊列"，依次執(zhí)行那些事件所對應的回調(diào)函數(shù)。
執(zhí)行棧中的代碼，總是在讀取"任務隊列"之前執(zhí)行。請看下面這個例子。
var req = new XMLHttpRequest();req.open('GET', url); req.onload = function (){}; req.onerror = function (){}; req.send();上面代碼中的req.send方法是Ajax操作向服務器發(fā)送數(shù)據(jù)，它是一個異步任務，意味著只有當前腳本的所有代碼執(zhí)行完，系統(tǒng)才會去讀取"任務隊列"。所以，它與下面的寫法等價。
var req = new XMLHttpRequest();req.open('GET', url);req.send();req.onload = function (){}; req.onerror = function (){}; 【等價個屁。這個調(diào)用其實有個默認回調(diào)函數(shù)，Ajax結束后，執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)檢查狀態(tài)，決定調(diào)用onload還是onerror。所以只要在回調(diào)函數(shù)執(zhí)行之前設置這兩個屬性就行】 也就是說，指定回調(diào)函數(shù)的部分（onload和onerror），在send()方法的前面或后面無關緊要，因為它們屬于執(zhí)行棧的一部分，系統(tǒng)總是執(zhí)行完它們，才會去讀取"任務隊列”。五、定時器
除了放置異步任務，"任務隊列"還有一個作用，就是可以放置定時事件，即指定某些代碼在多少時間之后執(zhí)行。這叫做"定時器"（timer）功能，也就是定時執(zhí)行的代碼。
定時器功能主要由setTimeout()和setInterval()這兩個函數(shù)來完成，它們的內(nèi)部運行機制完全一樣，區(qū)別在于前者指定的代碼是一次性執(zhí)行，后者則為反復執(zhí)行。以下主要討論setTimeout()。
setTimeout()接受兩個參數(shù)，第一個是回調(diào)函數(shù)，第二個是推遲執(zhí)行的毫秒數(shù)。
console.log(1); setTimeout(function(){console.log(2);},1000); console.log(3);上面代碼的執(zhí)行結果是1，3，2，因為setTimeout()將第二行推遲到1000毫秒之后執(zhí)行。
如果將setTimeout()的第二個參數(shù)設為0，就表示當前代碼執(zhí)行完（執(zhí)行棧清空）以后，立即執(zhí)行（0毫秒間隔）指定的回調(diào)函數(shù)。
setTimeout(function(){console.log(1);}, 0); console.log(2);上面代碼的執(zhí)行結果總是2，1，因為只有在執(zhí)行完第二行以后，系統(tǒng)才會去執(zhí)行"任務隊列"中的回調(diào)函數(shù)。
HTML5標準規(guī)定了setTimeout()的第二個參數(shù)的最小值（最短間隔），不得低于4毫秒，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。
另外，對于那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執(zhí)行，而是每16毫秒執(zhí)行一次。這時使用requestAnimationFrame()的效果要好于setTimeout()。
需要注意的是，setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執(zhí)行棧）執(zhí)行完，主線程才會去執(zhí)行它指定的回調(diào)函數(shù)。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會在setTimeout()指定的時間執(zhí)行。 【定時器并不是特例。到達時間點后，會形成一個事件（timeout事件）。不同的是一般事件是靠底層系統(tǒng)或者線程池之類的產(chǎn)生事件，但定時器事件是靠事件循環(huán)不停檢查系統(tǒng)時間來判定是否到達時間點來產(chǎn)生事件】?
六、Node.js的Event Loop
Node.js也是單線程的Event Loop，但是它的運行機制不同于瀏覽器環(huán)境。
請看下面的示意圖（作者@BusyRich）。
?
以我對Node的了解，上面這個圖也是錯的。】 【OS Operation不在那個位置，而是在event loop的后面。event queue在event loop中間】 【 js —> v8 —> node binding —> (event loop) —> worker threads/poll —> blocking operation ? ?<— ? ? <— ? ? ? ? ? ? ? ? ? <—— ?(event loop)<—————— event ?<—————— 】?
根據(jù)上圖，Node.js的運行機制如下。 （1）V8引擎解析JavaScript腳本。（2）解析后的代碼，調(diào)用Node API。（3）libuv庫負責Node API的執(zhí)行。它將不同的任務分配給不同的線程，形成一個Event Loop（事件循環(huán)），以異步的方式將任務的執(zhí)行結果返回給V8引擎。（4）V8引擎再將結果返回給用戶。 【完全不是不同的任務分配給不同的線程。只有磁盤IO操作才用到了線程池（unix）。】 【Node中，磁盤I/O的異步操作步驟如下：】 【將調(diào)用封裝成中間對象，交給event loop，然后直接返回】 【中間對象會被丟進線程池，等待執(zhí)行】 【執(zhí)行完成后，會將數(shù)據(jù)放進事件隊列中，形成事件】 【循環(huán)執(zhí)行，處理事件。拿到事件的關聯(lián)函數(shù)（callback）和數(shù)據(jù)，將其執(zhí)行】 【然后下一個事件，繼續(xù)循環(huán)】 除了setTimeout和setInterval這兩個方法，Node.js還提供了另外兩個與"任務隊列"有關的方法：process.nextTick和setImmediate。它們可以幫助我們加深對"任務隊列"的理解。process.nextTick方法可以在當前"執(zhí)行棧"的尾部----主線程下一次讀取"任務隊列"之前----觸發(fā)回調(diào)函數(shù)。也就是說，它指定的任務總是發(fā)生在所有異步任務之前。setImmediate方法則是在當前"任務隊列"的尾部觸發(fā)回調(diào)函數(shù)，也就是說，它指定的任務總是在主線程下一次讀取"任務隊列"時執(zhí)行，這與setTimeout(fn, 0)很像。請看下面的例子（via?StackOverflow）。
process.nextTick(function A() {console.log(1);process.nextTick(function B(){console.log(2);}); });setTimeout(function timeout() {console.log('TIMEOUT FIRED'); }, 0) // 1 // 2 // TIMEOUT FIRED上面代碼中，由于process.nextTick方法指定的回調(diào)函數(shù)，總是在當前"執(zhí)行棧"的尾部觸發(fā)，所以不僅函數(shù)A比setTimeout指定的回調(diào)函數(shù)timeout先執(zhí)行，而且函數(shù)B也比timeout先執(zhí)行。這說明，如果有多個process.nextTick語句（不管它們是否嵌套），將全部在當前"執(zhí)行棧"執(zhí)行。
現(xiàn)在，再看setImmediate。
setImmediate(function A() {console.log(1);setImmediate(function B(){console.log(2);}); });setTimeout(function timeout() {console.log('TIMEOUT FIRED'); }, 0) // 1 // TIMEOUT FIRED // 2上面代碼中，有兩個setImmediate。第一個setImmediate，指定在當前"任務隊列"尾部（下一次"事件循環(huán)"時）觸發(fā)回調(diào)函數(shù)A；然后，setTimeout也是指定在當前"任務隊列"尾部觸發(fā)回調(diào)函數(shù)timeout，所以輸出結果中，TIMEOUT FIRED排在1的后面。至于2排在TIMEOUT FIRED的后面，是因為setImmediate的另一個重要特點：一次"事件循環(huán)"只能觸發(fā)一個由setImmediate指定的回調(diào)函數(shù)。
我們由此得到了一個重要區(qū)別：多個process.nextTick語句總是一次執(zhí)行完，多個setImmediate則需要多次才能執(zhí)行完。事實上，這正是Node.js 10.0版添加setImmediate方法的原因，否則像下面這樣的遞歸調(diào)用process.nextTick，將會沒完沒了，主線程根本不會去讀取"事件隊列”！ 【10.0版就不用糾正了吧】 process.nextTick(function foo() {process.nextTick(foo); });事實上，現(xiàn)在要是你寫出遞歸的process.nextTick，Node.js會拋出一個警告，要求你改成setImmediate。另外，由于process.nextTick指定的回調(diào)函數(shù)是在本次"事件循環(huán)"觸發(fā)，而setImmediate指定的是在下次"事件循環(huán)"觸發(fā)，所以很顯然，前者總是比后者發(fā)生得早，而且執(zhí)行效率也高（因為不用檢查"任務隊列"）。
關于setImmediate與setTimeout(fn,0)的區(qū)別是，setImmediate總是在setTimeout前面執(zhí)行，除了主線程第一次進入Event Loop時。請看下面的例子。
setTimeout(function () {console.log('1'); },0);setImmediate(function () {console.log('2'); })上面代碼的運行結果不確定，有可能是1，2，也有可能是2，1，即使setTimeout和setImmediate兩個函數(shù)互換位置，也是如此。因為這些代碼是主線程第一次讀取Event Loop之前運行。但是，如果把這段代碼放在setImmediate之中，結果就不一樣。
setImmediate(function () {setTimeout(function () {console.log('1');},0);setImmediate(function () {console.log('2');}) }) 上面代碼運行結果總是2，1，因為進入Event Loop之后，setImmediate在setTimeout之前觸發(fā)。? 【還是會出現(xiàn)1， 2的情況。呵呵。不信試試】 （完）? 【準確講，使用事件驅動的系統(tǒng)中，必然有非常非常多的事件。如果事件都產(chǎn)生，都要主循環(huán)去處理，必然會導致主線程繁忙。那對于應用層的代碼而言，肯定有很多不關心的事件（比如只關心點擊事件，不關心定時器事件）。這會導致一定浪費。】 【這篇文章里沒有講到的一個重要概念是watcher。觀察者。】 【事實上，不是所有的事件都放置在一個隊列里。】 【不同的事件，放置在不同的隊列。】 【當我們沒有使用定時器時，則完全不用關心定時器事件這個隊列】 【當我們進行定時器調(diào)用時，首先會設置一個定時器watcher。事件循環(huán)的過程中，會去調(diào)用該watcher，檢查它的事件隊列上是否產(chǎn)生事件（比對時間的方式）】 【當我們進行磁盤IO的時候，則首先設置一個io watcher，磁盤IO完成后，會在該io watcher的事件隊列上添加一個事件。事件循環(huán)的過程中從該watcher上處理事件。處理完已有的事件后，處理下一個watcher】 【檢查完所有watcher后，進入下一輪檢查】 【對某類事件不關心時，則沒有相關watcher】 ? 【最后，如有問題，謝謝指出】?轉自：https://blog.csdn.net/lin_credible/article/details/40143961
?
轉載于:https://www.cnblogs.com/duhuo/p/4479116.html
總結
以上是生活随笔為你收集整理的【朴灵评注】JavaScript 运行机制详解：再谈Event Loop的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]基于Starling移动项目开发准
- 下一篇： gradle idea java ssm