成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Javascript event loop

reclay / 1994人閱讀

摘要：包括了操作例如事件綁定，這類操作。每個結(jié)束后，都會進行也就是檢查是否有在等待執(zhí)行，根據(jù)先進先出，依次執(zhí)行。簡單來說，會檢查是否有需要處理的，如果為空時，則會按照先進先出的順序來處理中的。

眾所周知， javascript是一個單線程語言。單線程也就意味著只有一個stack（調(diào)用棧），一次只能做一件事。那么又是如何實現(xiàn)異步操作？先來了解幾個關(guān)鍵的術(shù)語。

Call Stack 調(diào)用棧


如圖所示，在運行過程中，所有相關(guān)的變量是存于heap中，而call stack中是正在執(zhí)行的代碼。通過F12 developer tool 在debug模式也可以看到此時的call stack情況。下圖是最簡單的一種情況，函數(shù)根據(jù)調(diào)用順序依次進入call stack，執(zhí)行后再依次彈出（stack后進先出）。

Task Queue

那么JavaScript是怎么實現(xiàn)異步的呢？重要的task queue（任務隊列）來了。
一般而言，我們所理解的異步操作，都是放入task queue進行等待。如下代碼所示，console.log("start")進入call stack。而setTimeout是進入task queue進行等待。這里設置的時間為0，則是立即放入task queue，?? 是放入task queue而不是立即執(zhí)行。
只有在call stack為空的時候，event loop會講task queue中的任務調(diào)入call stack再執(zhí)行。

console.log("start");

setTimeout(()=>{
    console.log("hey")
}
, 0)

console.log("end");

輸出結(jié)果：

start
end
hey

Macrotask

一般而言，macrotask queue就是我們常說的task queue（也有人稱為message queue）。Macrotask包括了setTimeout, Dom 操作（例如onLoad), click/mouse事件綁定，fetch response這類操作。實際上這些都是瀏覽器提供的API，所以在執(zhí)行時是有它們多帶帶的線程去進行操作。舉個例子，setTimeout()設置了2s的延遲，是瀏覽器設置了timer來計時，是另外的線程在等待2秒，js主線程不受影響，2s后回調(diào)函數(shù)再進入task queue。

(function() {

  console.log("this is the start");

  setTimeout(function cb() {
    console.log("this is a msg from call back");
  });

  console.log("this is just a message");

  setTimeout(function cb1() {
    console.log("this is a msg from call back1");
  }, 0);

  console.log("this is the end");

})();

// "this is the start"
// "this is just a message"
// "this is the end"
// undefined (注意此時是函數(shù)返回，因為沒有設置返回值故輸出undefined) 
// "this is a msg from call back"
// "this is a msg from call back1"
Microtask

ES6提供了Promise來進行異步操作。為了區(qū)別開task稱為microtask。同上也有一個queue （job queue）來處理microtask。job queue擁有更高的優(yōu)先級。每個task結(jié)束后，都會進行perform a microtask checkpoint.也就是檢查job queue是否有microtask在等待執(zhí)行，根據(jù)先進先出，依次執(zhí)行。

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});


// script start
// promise1
// promise2
// setTimeout
Event loop

簡單來說，event loop會檢查queue是否有需要處理的task，如果call stack為空時，則會按照先進先出的順序來處理queue中的task。而task分為microtask【Promise】和macrotask【setTimeout/DOM events/fetch】。優(yōu)先處理microtask。一次event loop只會處理一次macrotask，并且是當microtask queue都處理結(jié)束后才會去處理macrotasks。

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

強烈推薦大家去看 https://jakearchibald.com/201... 作者用動畫的形式非常形象清晰地描述了過程。

參考文章

The JavaScript Event Loop

JavaScript Event Loop Explained

EventLoop | MDN

Tasks, microtasks, queues and schedules

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103290.html

相關(guān)文章

  • JavaScript 事件循環(huán)（譯文JavaScript Event Loop）

    摘要：事件循環(huán)了解了在引擎中是如何工作了之后，來看下如何使用異步回調(diào)函數(shù)來避免代碼。從回調(diào)函數(shù)被放入后秒鐘，把移到中。由于事件循環(huán)持續(xù)地監(jiān)測調(diào)用棧是否已空，此時它一注意到調(diào)用?？樟?，就調(diào)用并創(chuàng)建一個新的調(diào)用棧。 聽多了JavaScript單線程，異步，V8，便會很想去知道JavaScript是如何利用單線程來實現(xiàn)所謂的異步的。我參考了一些文章，了解到一個很重要的詞匯：事件循環(huán)(Event L...

    K_B_Z 評論0 收藏0

  • Javascript 運行機制詳解，Event Loop

    摘要：主線程在任務隊列中讀取事件，這個過程是循環(huán)不斷地，所以這種運行機制叫做事件循環(huán)是在執(zhí)行棧同步代碼結(jié)束之后，下一次任務隊列執(zhí)行之前。 單線程 javascript為什么是單線程語言，原因在于如果是多線程，當一個線程對DOM節(jié)點做添加內(nèi)容操作的時候，另一個線程要刪除這個DOM節(jié)點，這個時候，瀏覽器應該怎么選擇，這就造成了混亂，為了解決這類問題，在一開始的時候，javascript就采用單線...

    Jingbin_ 評論0 收藏0

  • 初窺JavaScript事件機制的實現(xiàn)（一）—— Node.js事件驅(qū)動實現(xiàn)概覽

    摘要：如果當前沒有事件也沒有定時器事件，則返回。相關(guān)資料關(guān)于的架構(gòu)及設計思路的事件討論了使用線程池異步運行代碼。下一篇初窺事件機制的實現(xiàn)二中定時器的實現(xiàn) 在瀏覽器中，事件作為一個極為重要的機制，給予JavaScript響應用戶操作與DOM變化的能力；在Node.js中，事件驅(qū)動模型則是其高并發(fā)能力的基礎(chǔ)。 學習JavaScript也需要了解它的運行平臺，為了更好的理解JavaScript的事...

    lavor 評論0 收藏0

  • 瀏覽器與NodeJS的EventLoop異同，以及部分機制。

    摘要：瀏覽器與的異同，以及部分機制有人對部分迷惑，本身構(gòu)造函數(shù)是同步的，是異步。瀏覽器的的已全部分析完成，過程中引用阮一峰博客，知乎，部分文章內(nèi)容，侵刪。 瀏覽器與NodeJS的EventLoop異同，以及部分機制 PS：有人對promise部分迷惑，Promise本身構(gòu)造函數(shù)是同步的，.then是異步。---- 2018/7/6 22：35修改 javascript 是一門單線程的腳本...

    jubincn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<