说说 event loop
问题
说说 event loop
答案
⾸先， js 是单线程的，主要的任务是处理⽤户的交互，⽽⽤户的交互⽆⾮就 是响应 DOM 的增删改，使⽤事件队列的形式，⼀次事件循环只处理⼀个事件 响应，使得脚本执⾏相对连续，所以有了事件队列，⽤来储存待执⾏的事件， 那么事件队列的事件从哪⾥被 push 进来的呢。那就是另外⼀个线程叫事件触 发线程做的事情了，他的作⽤主要是在定时触发器线程、异步 HTTP 请求线程 满⾜特定条件下的回调函数 push 到事件队列中，等待 js 引擎空闲的时候去 执⾏，当然js引擎执⾏过程中有优先级之分，⾸先js引擎在⼀次事件循环中， 会先执⾏js线程的主任务，然后会去查找是否有微任务
microtask（promise） ，如果有那就优先执⾏微任务，如果没有，在去查找 宏任务 macrotask（setTimeout、setInterval） 进⾏执⾏
答案2
JS中的event loop
众所周知 JS 是⻔⾮阻塞单线程语⾔，因为在最初 JS 就是为了和浏览器交 互⽽诞⽣的。如果 JS 是⻔多线程的语⾔话，我们在多个线程中处理 DOM 就可能会发⽣问题（⼀个线程中新加节点，另⼀个线程中删除节点）
JS 在执⾏的过程中会产⽣执⾏环境，这些执⾏环境会被顺序的加⼊到执⾏栈中。如果遇 到异步的代码，会被挂起并加⼊到 Task （有多种 task ） 队列中。⼀旦执⾏栈为空， Event Loop 就会从 Task 队列中拿出需要执⾏的代码并放⼊执⾏栈中执⾏，所以本 质上来说 JS 中的异步还是同步⾏为
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
console.log('script end');
不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务 （ microtask ） 和 宏任务（ macrotask ）。在 ES6 规范中， microtask 称为 jobs，macrotask 称为 task
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
new Promise((resolve) => {
console.log('Promise')
resolve()
}).then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
// script start => Promise => script end => promise1 => promise2 => setTime
以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于 微任务⽽ setTimeout 属于宏任务
微任务
- process.nextTick
- promise
- Object.observe
- MutationObserver
宏任务
- script
- setTimeout
- setInterval
- setImmediate
- I/O
- UI rendering
宏任务中包括了 script ，浏览器会先执⾏⼀个宏任务，接下来有异步代码的话就先执⾏微任务
所以正确的⼀次 Event loop 顺序是这样的
- 执⾏同步代码，这属于宏任务
- 执⾏栈为空，查询是否有微任务需要执⾏
- 执⾏所有微任务
- 必要的话渲染 UI
- 然后开始下⼀轮 Event loop ，执⾏宏任务中的异步代码
通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有⼤量的计算 并且需要操作 DOM 的话，为了更快的响应界⾯响应，我们可以把操作 DOM 放⼊微任务中
Node 中的 Event loop
- Node 中的 Event loop 和浏览器中的不相同。
- Node 的 Event loop 分为 6 个阶段，它们会按照顺序反复运⾏
timer
- timers 阶段会执⾏ setTimeout 和 setInterval
- ⼀个 timer 指定的时间并不是准确时间，⽽是在达到这个时间后尽快执⾏回调，可能会因为系统正在执⾏别的事务⽽延迟
I/O
I/O 阶段会执⾏除了 close 事件，定时器和 setImmediate 的回调
poll
- poll 阶段很重要，这⼀阶段中，系统会做两件事情
- 执⾏到点的定时器
- 执⾏ poll 队列中的事件
- 并且当 poll 中没有定时器的情况下，会发现以下两件事情
- 如果 poll 队列不为空，会遍历回调队列并同步执⾏，直到队列为空或者系统限制
- 如果 poll 队列为空，会有两件事发⽣
- 如果有 setImmediate 需要执⾏， poll 阶段会停⽌并且进⼊到 check 阶段执⾏
- setImmediate
- 如果没有 setImmediate 需要执⾏，会等待回调被加⼊到队列中并⽴即执⾏回调
- 如果有别的定时器需要被执⾏，会回到 timer 阶段执⾏回调。
check
check 阶段执⾏ setImmediate
close callbacks
- close callbacks 阶段执⾏ close 事件
- 并且在 Node 中，有些情况下的定时器执⾏顺序是随机的
setTimeout(() => {
console.log('setTimeout');
}, 0);
setImmediate(() => {
console.log('setImmediate');
})
// 这⾥可能会输出 setTimeout，setImmediate
// 可能也会相反的输出，这取决于性能
// 因为可能进⼊ event loop ⽤了不到 1 毫秒，这时候会执⾏ setImmediate
// 否则会执⾏ setTimeout
上⾯介绍的都是 macrotask 的执⾏情况， microtask 会在以上每个阶段完成后⽴即执⾏
setTimeout(()=>{
console.log('timer1')
Promise.resolve().then(function() {
console.log('promise1')
})
}, 0)
setTimeout(()=>{
console.log('timer2')
Promise.resolve().then(function() {
console.log('promise2')
})
}, 0)
// 以上代码在浏览器和 node 中打印情况是不同的
// 浏览器中⼀定打印 timer1, promise1, timer2, promise2
// node 中可能打印 timer1, timer2, promise1, promise2
// 也可能打印 timer1, promise1, timer2, promise2
Node 中的 process.nextTick 会先于其他 microtask 执⾏
setTimeout(() => {
console.log("timer1");
Promise.resolve().then(function() {
console.log("promise1");
});
}, 0);
process.nextTick(() => {
console.log("nextTick");
});
// nextTick, timer1, promise1
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
