事件循環

imingyu 發布于2019-08-23 15:43 / 1978人閱讀

摘要：所以一切版的多線程都是用單線程模擬出來的，一切多線程都是紙老虎事件循環既然是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業務，同理任務也要一個一個順序執行。

1、關于javascript
javascript是一門單線程語言，在最新的HTML5中提出了Web-Worker，但javascript是單線程這一核心仍未改變。所以一切javascript版的"多線程"都是用單線程模擬出來的，一切javascript多線程都是紙老虎！
2、javascript事件循環
既然js是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業務，同理js任務也要一個一個順序執行。如果一個任務耗時過長，那么后一個任務也必須等著。那么問題來了，假如我們想瀏覽新聞，但是新聞包含的超清圖片加載很慢，難道我們的網頁要一直卡著直到圖片完全顯示出來？因此聰明的程序員將任務分為兩類：

JS分為同步任務和異步任務
同步任務都在主線程上執行，形成一個執行棧
主線程之外，事件觸發線程管理著一個任務隊列，只要異步任務有了運行結果，就在任務隊列之中放置一個事件。
一旦執行棧中的所有同步任務執行完畢（此時JS引擎空閑），系統就會讀取任務隊列，將可運行的異步任務添加到可執行棧中，開始執行

事件循環是通過任務隊列的機制來進行協調的。一個 Event Loop 中，可以有一個或者多個任務隊列(task queue)，一個任務隊列便是一系列有序任務(task)的集合；每個任務都有一個任務源(task source)，源自同一個任務源的 task 必須放到同一個任務隊列，從不同源來的則被添加到不同隊列。 setTimeout/Promise 等API便是任務源，而進入任務隊列的是他們指定的具體執行任務。

宏任務:

macro)task（又稱之為宏任務），可以理解是每次執行棧執行的代碼就是一個宏任務（包括每次從事件隊列中獲取一個事件回調并放到執行棧中執行）。

瀏覽器為了能夠使得JS內部(macro)task與DOM任務能夠有序的執行，會在一個(macro)task執行結束后，在下一個(macro)task 執行開始前，對頁面進行重新渲染，流程如下：
(macro)task->渲染->(macro)task->...
(macro)task主要包含：script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)

微任務:

microtask（又稱為微任務），可以理解是在當前 task 執行結束后立即執行的任務。也就是說，在當前task任務后，下一個task之前，在渲染之前。

所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染。也就是說，在某一個macrotask執行完后，就會將在它執行期間產生的所有microtask都執行完畢（在渲染前）。

microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 環境)

運行機制:

在事件循環中，每進行一次循環操作稱為 tick，每一次 tick 的任務處理模型是比較復雜的，但關鍵步驟如下：

執行一個宏任務（棧中沒有就從事件隊列中獲取）
執行過程中如果遇到微任務，就將它添加到微任務的任務隊列中
宏任務執行完畢后，立即執行當前微任務隊列中的所有微任務（依次執行）
當前宏任務執行完畢，開始檢查渲染，然后GUI線程接管渲染
渲染完畢后，JS線程繼續接管，開始下一個宏任務（從事件隊列中獲取）

流程圖如下：

兩道題讓你全部理解事件循環

console.log("1")
  setTimeout(function() {
    console.log("2")
    process.nextTick(function() {
      console.log("3")
    })
    new Promise(function(resolve) {
      console.log("4")
      resolve()
    }).then(function() {
      console.log("5")
    })
  })
  process.nextTick(function() {
    console.log("6")
  })
  new Promise(function(resolve) {
    console.log("7")
    resolve()
  }).then(function() {
    console.log("8")
  })
  setTimeout(function() {
    console.log("9")
    process.nextTick(function() {
      console.log("10")
    })
    new Promise(function(resolve) {
      console.log("11")
      resolve()
    }).then(function() {
      console.log("12")
    })
  })
  
  第二題
async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2() {
    console.log("async2");
}
console.log("script start");
setTimeout(function() {
    console.log("setTimeout");
}, 0)
async1();
new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});
console.log("script end");

注意：
async function async1() {                        
    console.log("async1 start");
    await async2();                   
    console.log("async1 end");
}
等同于
async function async1() {
    console.log("async1 start");
    Promise.resolve(async2()).then(() => {
            console.log("async1 end");
    })
}

GPU云服務器云服務器 python事件循環 js事件循環機制 gpu while循環與for循環 asp循環改不循環

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102480.html

JavaScript事件循環(Event Loop)

摘要：事件循環的順序，決定代碼執行的順序。輸出第二輪事件循環正式結束三第三輪事件循環第三輪事件循環從宏任務開始。記為遇到，立即執行回調函數放入中注冊，然后被分發到微任務事件隊列中。 1、為什么要有事件循環？因為js是單線程的，事件循環是js的執行機制，也是js實現異步的一種方法。既然js是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業務，同理js任務也要一個一個順序執行。如...

dmlllll 2019-08-23 14:52 評論0 收藏0
[譯]事件循環，Node.js背后的核心概念

摘要：事件處理器，則是當指定事件觸發時，執行的一段代碼。事件循環以一個無限循環的形式啟動，存在于二進制文件里函數的最后，當沒有更多可被執行的事件處理器時，它就退出。前言如果你了解過Node.js，那么你一定聽說過事件循環。你一定想知道它為什么那么特殊，并且為什么你需要關注它？此時此刻的你，可能已經寫過許多基于Express.js的后端代碼，但沒有接觸到任何的循環。在下文中，我們會先在一...

Meils 2019-08-21 10:41 評論0 收藏0
淺談不同環境下的JavaScript執行機制 + 示例詳解

摘要：如果沒有其他異步任務要處理比如到期的定時器，會一直停留在這個階段，等待請求返回結果。執行的執行事件關閉請求的，例如事件循環的每一次循環都需要依次經過上述的階段。因此，才會早于執行。 showImg(https://segmentfault.com/img/bVbnY76); 概念同步任務（Synchronous）在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務 ...

wanghui 2019-08-23 15:04 評論0 收藏0
由setTimeout和setImmediate執行順序的隨機性窺探Node的事件循環機制

摘要：問題引入接觸過事件循環的同學大都會糾結一個點，就是在中和執行順序的隨機性。當隊列被執行完，或者執行的回調數量達到上限后，事件循環才會進入下一個階段。嵌套的在下一個事件循環的階段執行回調輸出嵌套的。問題引入接觸過事件循環的同學大都會糾結一個點，就是在Node中setTimeout和setImmediate執行順序的隨機性。比如說下面這段代碼： setTimeout(() => { ...

marek 2019-08-26 11:35 評論0 收藏0
Node中的事件循環

摘要：的事件循環一個線程有唯一的一個事件循環。索引就是指否還有需要執行的事件，是否還有請求，關閉事件循環的請求等等。先來看一下定義的定義是在事件循環的下一個階段之前執行對應的回調。雖然是這樣定義的，但是它并不是為了在事件循環的每個階段去執行的。 Node中的事件循環如果對前端瀏覽器的時間循環不太清楚，請看這篇文章。那么node中的事件循環是什么樣子呢？其實官方文檔有很清楚的解釋，本文先從n...

lwx12525 2019-08-26 11:00 評論0 收藏0
NodeJS架構 - 單線程事件循環模型

摘要：客戶端可能需要等待服務器釋放可用的線程去處理其請求處理阻塞式的任務時浪費時間的架構單線程事件循環不遵循請求響應多線程無狀態模型。它采用單線程與事件循環模型。 showImg(https://segmentfault.com/img/remote/1460000017402136); 這篇譯章探究了NodeJS的架構和單線程事件循環模型。我們將在本文中討論NodeJS如何在底層工作，它遵...

leap_frog 2019-08-23 14:07 評論0 收藏0