1. event loop 的描述
JavaScript 是單線程的，簡(jiǎn)單點(diǎn)說就是同一時(shí)間只能做一件事情战转，這樣會(huì)導(dǎo)致一些問題娃承，有些任務(wù)耗時(shí)較長，當(dāng)然是不能停留在這里的薛匪，比如說網(wǎng)絡(luò)請(qǐng)求需要三秒鐘，肯定不能等著脓鹃，要先去執(zhí)行別的代碼逸尖，回頭去執(zhí)行回調(diào)函數(shù)，這就是簡(jiǎn)單的事件循環(huán)機(jī)制的描述瘸右。異步的實(shí)現(xiàn)要基于回調(diào)來實(shí)現(xiàn)娇跟，event loop 就是異步回調(diào)的實(shí)現(xiàn)原理
Event Loop即事件循環(huán)，是指瀏覽器或Node的一種解決javaScript單線程運(yùn)行時(shí)不會(huì)阻塞的一種機(jī)制太颤，也就是我們經(jīng)常使用異步的原理苞俘。
2. JS 執(zhí)行過程
Javascript 有一個(gè) main thread 主線程和 call-stack 調(diào)用棧(執(zhí)行棧)，所有的任務(wù)都會(huì)被放到調(diào)用棧等待主線程執(zhí)行龄章。
原理圖
JS調(diào)用棧 (圖中的stack) 采用的是后進(jìn)先出的規(guī)則吃谣，當(dāng)函數(shù)執(zhí)行的時(shí)候，會(huì)被添加到棧的頂部做裙，當(dāng)執(zhí)行棧執(zhí)行完成后岗憋，就會(huì)從棧頂移出，直到棧內(nèi)被清空锚贱。
同步與異步任務(wù)
Javascript單線程任務(wù)被分為同步任務(wù)和異步任務(wù)仔戈，同步任務(wù)會(huì)在調(diào)用棧中按照順序等待主線程依次執(zhí)行，異步任務(wù)會(huì)在異步任務(wù)有了結(jié)果后拧廊，將注冊(cè)的回調(diào)函數(shù)放入任務(wù)隊(duì)列中等待主線程空閑的時(shí)候（調(diào)用棧被清空）监徘，被讀取到棧內(nèi)等待主線程的執(zhí)行。
宏任務(wù)與微任務(wù)的區(qū)分
在JavaScript中吧碾，任務(wù)被分為兩種凰盔，一種宏任務(wù)（MacroTask）也叫Task，一種叫微任務(wù)（MicroTask）滤港。
宏任務(wù)： 多是 webAPI
- setTimeout
- setInterval
- requestAnimationFrame
- script（整體代碼）
- setImmediate （node）
- I/O
- UI rendering
微任務(wù)： ES5,6語法
- Promise.then
- queueMicroTask
- MutationObserver
- async/await (promise語法糖)
4. event loop 充當(dāng)角色
- 如Call Stack為空(即同步代碼執(zhí)行完) Event Loop 開始工作
- 輪詢查找Callback Queue廊蜒，如有則移動(dòng)到Call Stack 執(zhí)行
- 然后繼續(xù)輪詢查找(永動(dòng)機(jī)一樣)
- DOM渲染會(huì)在call stack為空的時(shí)候嘗試渲染
總結(jié)：說白了就是先做宏任務(wù)趴拧，有遇到微任務(wù)就追加在當(dāng)前的宏任務(wù)后面，等宏任務(wù)做完了再做好這些微任務(wù)山叮。倘若在執(zhí)行宏任務(wù)時(shí)遇到了又一個(gè)宏任務(wù)時(shí)著榴，則要等當(dāng)前的宏任務(wù)和其所跟著的微任務(wù)全做完了，才能開始這個(gè)第二個(gè)宏任務(wù)屁倔，依次不斷循環(huán)直到宏任務(wù)隊(duì)（包括其所追加的微任務(wù)隊(duì)列）全部做完了為止脑又。
本文描述的是JS結(jié)合瀏覽器的event loop過程，與node中的event loop有些不同锐借，感興趣的小伙伴可以參考node官方文檔
