Event Loop
JavaScript是单线程的
- javascript 的代码都是串行的。前面的代码没有执行完毕后面的代码不能执行
基本执行顺序
- 程序会从上至下依次执行当前所有同步代码
- 在执行的过程中如果遇到异步代码，会将异步代码放到事件循环中
- 当前所有同步代码执行完毕后， JavaScript 会不断检测事件循环中的代码是否满足条件
- 一旦满足条件，执行满足条件的异步代码
异步代码分为两类
- 宏(大)任务，可以理解为较长时间才能执行完毕的任务，常见的宏任务有 setTimeout 、 setInterval
- 微(小)任务，可以理解为很短的时间就能执行完毕的任务，常见的微任务有 Promise 、 MutationObserver
事件循环
- 事件循环中有两个队列，宏任务队列和微任务队列
- 遇到宏任务会将该任务放到宏任务队列中
- 遇到微任务会将该任务放到微任务队列中
- 队列中的任务采用先进先出的原则，多个任务同时满足条件，执行先放进去的任务
完整执行顺序
- 从上至下执行当前所有同步代码
- 遇到异步代码，自动判断该异步代码是宏任务还是微任务
- 是宏任务，放至事件循环宏任务队列中
- 是微任务，放至事件循环微任务队列中
- 当同步代码执行完毕后，就会自动去检测微任务队列中满足条件的代码执行
- 当微任务队列中所有的代码都执行完毕后，才会去检测宏任务队列中满足条件的代码
- 当宏任务队列中有满足条件的代码，就会执行该满足条件的代码
- 执行完一个宏任务后，会立即去检测微任务队列中有没有代码
- 如果有则清空该微任务队列后才会执行下一个宏任务