前提
- js是单线程运行的
- 异步要基于回调来实现的
- event loop就是异步回调的实现原理
event loop过程
- 同步代码，一行一行放到Call Stack里面执行
- 遇到异步代码，先记录下，等待时机（定时，网络请求）
- 时间到了，移动到CallBack Queue
- 如果Call Stack 为空， Event loop开始工作
- 轮询查找CallBack Queue，如果有则移动到Call Stack 执行
- 然后继续轮询查找
DOM事件和 event loop
- js是单线程的
- 异步（setTimeout， ajax）使用回调，基于event loop
- DOM事件也是使用回调，基于event loop
宏任务和微任务
宏任务 macroTask 微任务 microTask
宏任务：setTimeout， setInterval，Ajax，DOM事件 微任务：Promise，async/await 微任务比宏任务的执行时机要早
前端所有的异步（宏微）
event loop 与 DOM渲染
回顾，event loop
- js是单线程的，并且和DOM渲染公用一个线程
- js执行的时候，需要留一定的时间给DOM渲染
Call Stack 空闲（同步代码执行完毕） ==》 尝试DOM渲染 ==》触发Event loop
微任务和宏任务的区别
- 宏任务：DOM渲染后触发，如 setTimeout 浏览器规定的
- 微任务：DOM渲染前触发，如 Promise ES6规定
