理解JavaScript事件循环与任务队列

注意

这里我们讨论的是浏览器的eventloop而不是node环境下的eventloop

event-loop 的执行过程

JS是单线程的，异步要基于回调来实现，eventloop就是异步回调的实现原理

只考虑同步异步：

1. 同步代码，一行一行放在Call Stack执行
2. 遇到异步代码，会先“记录”下，等待时机（定时、网络请求）
3. 时机到了，就移动到Callback Queue
4. 如Call Stack为空(即同步代码执行完) Event-loop开始工作
5. 轮询查找Callback Queue,如有则移动到Call Stack执行
6. 然后继续轮询查找(永动机一样)

宏任务有哪些？微任务有哪些？

• 宏任务：setTimeout, setinterval , Ajax , DOM 事件（浏览器规定的）
• 微任务：Promise(then),async/await(ES6语法规定的)

宏任务、微任务与DOM渲染的关系

宏任务：DOM渲染前触发

微任务：DOM渲染后触发

微任务、宏任务和 DOM 渲染，在event loop 的过程

1. call Stack清空
2. 执行当前的微任务
3. 尝试DOM渲染
4. 触发event-loop（执行宏任务）

宏任务微任务与事件循环

浏览器event-loop

浏览器event-loop