浏览器 Eventloop 和 Node 中的有什么区别

问题

浏览器 Eventloop 和 Node 中的有什么区别

答案

众所周知 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');

以上代码虽然 setTimeout 延时为 0 ，其实还是异步。这是因为 HTML5 标准规定这个 函数第⼆个参数不得⼩于 4 毫秒，不⾜会⾃动增加。所以 setTimeout 还是会在 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 renderin

很多⼈有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执⾏⼀个宏任务，接下来有异步代码的话就先执⾏微任务

所以正确的⼀次 Event loop 顺序是这样的

• 执⾏同步代码，这属于宏任务
• 执⾏栈为空，查询是否有微任务需要执⾏
• 执⾏所有微任务
• 必要的话渲染 UI
• 然后开始下⼀轮 Event loop ，执⾏宏任务中的异步代码

通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有⼤量的计算并且需要操作 DOM 的话，为了更快的 界⾯响应，我们可以把操作 DOM 放⼊微任务中

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！