參考許多大神的文章,寫下自己的理解

事件循環:

說到事件循環就得談到js中同步和異步的執行順序
1.javascript將任務分為同步任務和異步任務,同步任務放到主線中,異步函數首先進行回調函數注冊。
2.當異步任務滿足觸發條件的時候,異步任務的回調函數會被放入事件隊列中。
3.然后當主線程的同步任務都執行完畢,系統就會去事件隊列中讀取異步的回調函數。
例如這段代碼:

// 同步任務 打印 first console.log("1"); setTimeout(() => { // 異步任務 回調函數放入事件隊列,當主線程的同步任務都執行完畢打印console.log("2"); },0) // 同步任務 打印last console.log("3"); //所以打印結果1 3 2

常見異步任務

1.DOM事件
2.AJAX請求
3.定時器setTimeout和setlnterval
4.ES6的Promise（Promise定義部分為同步任務，回調.then部分為異步任務）
例如這段代碼:

setTimeout(() => {console.log(1); }, 0) new Promise(function(resolve){console.log(2);for(var i = 0; i < 10000; i++){i == 99 && resolve();} }).then(function(){console.log(3) }); console.log(4)//按照上面的操作：可以很輕松得出案例的打印結果：2，4，1，3

可是結果卻是2 4 3 1,那么也就意味著，JavaScript的異步任務是存在優先級的。
JavaScript除了廣義上將任務劃分為同步任務和異步任務，還對異步任務進行了更精細的劃分。異步任務又進一步分為微任務和宏任務。宏任務和微任務分別有各自的任務隊列即宏任務隊列和微任務隊列。例如下面這張圖:
可以看到宏任務有script,定時器,ajax,history traversal i/o,微任務有promise.then,process.nextTick,MutationObserver,Object,observer

history traversal任務（h5當中的歷史操作）
process.nextTick（nodejs中的一個異步操作）
MutationObserver（h5里面增加的，用來監聽DOM節點變化的）
下面是執行順序:

總結

以上是生活随笔為你收集整理的js中的事件循环和宏任务和微任务的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

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