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

事件循環(huán):

說到事件循環(huán)就得談到j(luò)s中同步和異步的執(zhí)行順序
1.javascript將任務(wù)分為同步任務(wù)和異步任務(wù),同步任務(wù)放到主線中,異步函數(shù)首先進行回調(diào)函數(shù)注冊。
2.當(dāng)異步任務(wù)滿足觸發(fā)條件的時候,異步任務(wù)的回調(diào)函數(shù)會被放入事件隊列中。
3.然后當(dāng)主線程的同步任務(wù)都執(zhí)行完畢,系統(tǒng)就會去事件隊列中讀取異步的回調(diào)函數(shù)。
例如這段代碼:

// 同步任務(wù) 打印 first console.log("1"); setTimeout(() => { // 異步任務(wù) 回調(diào)函數(shù)放入事件隊列,當(dāng)主線程的同步任務(wù)都執(zhí)行完畢打印console.log("2"); },0) // 同步任務(wù) 打印last console.log("3"); //所以打印結(jié)果1 3 2

常見異步任務(wù)

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

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)//按照上面的操作：可以很輕松得出案例的打印結(jié)果：2，4，1，3

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

history traversal任務(wù)（h5當(dāng)中的歷史操作）
process.nextTick（nodejs中的一個異步操作）
MutationObserver（h5里面增加的，用來監(jiān)聽DOM節(jié)點變化的）
下面是執(zhí)行順序:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。