EventLoop痴昧，也就是平時(shí)所說(shuō)的事件循環(huán)稽穆，那什么是eventloop呢？這里大致介紹一下赶撰。
首先舌镶，JavaScript是一個(gè)單線程的語(yǔ)言，為了解決多任務(wù)的問(wèn)題豪娜，采用了一種叫做異步的方式餐胀，在看異步之前，我們先來(lái)看看什么是同步瘤载。
-
同步操作
設(shè)想一個(gè)場(chǎng)景：
同步操作在這個(gè)場(chǎng)景中否灾，JavaScript首先進(jìn)行了一個(gè)I/O操作，但由于I/O操作很耗時(shí)間鸣奔，JavaScript又是單線程的墨技，所以JavaScript就要等待I/O操作返回結(jié)果惩阶，而這時(shí)JavaScript引擎就會(huì)處于空閑時(shí)間，等到I/O操作返回結(jié)果之后扣汪，引擎再進(jìn)行處理断楷。
之后我們發(fā)送一個(gè)HTTP請(qǐng)求，請(qǐng)求之外再次等待服務(wù)器返回結(jié)果崭别，然后才能處理冬筒。
把在這個(gè)過(guò)程畫出來(lái)就是如上圖所示，圖中陰影部分為等待時(shí)間茅主，可以看出舞痰，等待時(shí)間遠(yuǎn)遠(yuǎn)長(zhǎng)于引擎運(yùn)行時(shí)間。這就是同步操作暗膜，即按順序運(yùn)行每一個(gè)任務(wù)匀奏。
-
異步操作
還是上面按個(gè)場(chǎng)景：
異步操作這次我們換一種方式，讓JavaScript發(fā)送完請(qǐng)求之后学搜，不等待結(jié)果返回而直接執(zhí)行之后的代碼和任務(wù)娃善，然后等到結(jié)果返回之后，調(diào)用事先設(shè)置好的回調(diào)函數(shù)來(lái)處理返回結(jié)果瑞佩，這就是異步操作聚磺。
可能有人會(huì)覺(jué)得奇怪，不是說(shuō)JavaScript是一個(gè)單線程語(yǔ)言嗎炬丸，它哪里來(lái)的另一個(gè)線程去在執(zhí)行同步任務(wù)的同時(shí)去執(zhí)行那些耗時(shí)操作呢瘫寝，其實(shí)雖然瀏覽器提供的JavaScript引擎是單線程的，但是瀏覽器還提供了引擎之外的一些其他東西稠炬，比如Web API焕阿，這些都是可以調(diào)用的其他線程。舉個(gè)例子來(lái)說(shuō)首启，JavaScript發(fā)送一條HTTP請(qǐng)求暮屡，之后繼續(xù)執(zhí)行主線程的同步任務(wù)，而等待返回結(jié)果這件事就交給了瀏覽器毅桃，等到結(jié)果返回之后褒纲，瀏覽器通知JavaScript引擎來(lái)調(diào)用回調(diào)函數(shù)（其實(shí)是返回結(jié)果之后將回調(diào)函數(shù)放入了任務(wù)隊(duì)列，下文細(xì)講）钥飞。
從上面的描述可以知道莺掠，JavaScript通過(guò)異步，可以大大提高引擎利用效率读宙。
說(shuō)完了什么是同步什么是異步彻秆，我們來(lái)看看eventloop（這里只說(shuō)瀏覽器環(huán)境下的eventloop，不談node環(huán)境下的）。在JavaScript中唇兑，存在一個(gè)執(zhí)行棧墓律，這個(gè)執(zhí)行棧可以看做是JavaScript的主線程幔亥，當(dāng)我們調(diào)用一個(gè)函數(shù)時(shí)，JavaScript引擎會(huì)將函數(shù)push到執(zhí)行棧（Stack）中察纯，執(zhí)行完畢之后pop出去帕棉，當(dāng)遇到異步任務(wù)時(shí)（例如setTimeout），就將任務(wù)放進(jìn)任務(wù)隊(duì)列中饼记。異步任務(wù)有兩種香伴，一種叫做macrotask（簡(jiǎn)稱task，宏任務(wù)具则，在ES6規(guī)范中稱為Job）即纲，另一種是microtask（微任務(wù)）。
在遇到異步任務(wù)時(shí)博肋，將任務(wù)添加進(jìn)任務(wù)隊(duì)列（先進(jìn)先出）中低斋，其中宏任務(wù)添加到宏任務(wù)隊(duì)列中，微任務(wù)添加到微任務(wù)隊(duì)列中匪凡，然后主線程繼續(xù)往下執(zhí)行同步任務(wù)膊畴，當(dāng)主線程任務(wù)執(zhí)行完畢之后，也就是Stack執(zhí)行棧為空時(shí)病游，JavaScript引擎會(huì)首先看看微任務(wù)隊(duì)列是否為空唇跨，不為空就取出微任務(wù)隊(duì)列中所有微任務(wù)然后順序執(zhí)行，之后再?gòu)暮耆蝿?wù)隊(duì)列中取出第一個(gè)任務(wù)置入Stack中執(zhí)行衬衬，執(zhí)行時(shí)若有微任務(wù)繼續(xù)放到微任務(wù)隊(duì)列买猖，當(dāng)此事件執(zhí)行完畢，還會(huì)把微任務(wù)隊(duì)列中的微任務(wù)全部執(zhí)行完畢滋尉，然后再去取宏任務(wù)隊(duì)列中的異步任務(wù)玉控。。兼砖。奸远。如此反復(fù)循環(huán)，形成了eventloop事件循環(huán)讽挟。
下面用一張圖展示一下：
來(lái)看個(gè)例子：
console.log(0)
let p = Promise.resolve()
setTimeout(()=>{
console.log(4);
setTimeout(()=>{
console.log(5);
},0);
},0);
p.then(data=>{
console.log(2);
setTimeout(()=>{
console.log(3);
},0);
})
console.log(6)
輸出是什么呢懒叛？
0 6 2 4 3 5
下面列舉常見的macrotask和microtask：
-
macrotask
setInterval, setTimeout, setImmediate(只有IE中能用), MessageChannel
-
microtask
Promise的then， (MutationObserver)
