【基础篇】浏览器中的Event loop

在讲Event loop之前，我们先思考一个问题

js为什么是单线程？

原因可能是如果js是多线程，在多个线程中处理DOM就可能会发生问题（一个线程添加新节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题

好了，接下来我们开始讲Event loop

简单的说，就是js在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到Task（有多种Task）队列中。一旦执行栈为空，Event Loop就会从Task队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说，js中的异步行为还是同步的。

我们看下以下代码，以下代码输出'1', '3', '2'

console.log('1');
setTimeout(()=>{
  console.log('2');
}, 0);
console.log('3');
//'1'
//'3'
//'2'
复制代码

之前对setTimeout理解有偏差，虽然设置了为0，其实还是异步，是因为html5标准规定这个函数的第二个参数不得小于4ms，不足会自动增加。

Task队列分为两种

• 微任务microtask，es6中称为jobs。以下这些行为属于微任务

  • process.nextTick
  • promise
  • Object.observe
  • MutationObserver

• 宏任务macrotask，es6中称为task。以下这些行为属于宏任务

  • script
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI rendering

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

正确的一次Event loop顺序应该是这样的：

1. 执行同步代码（这属于宏任务）
2. 执行栈为空，查询是否有微任务需要执行
3. 执行所有微任务
4. 必要的话渲染UI
5. 开始下一轮Event loop，执行宏任务中的异步代码

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